Webpack 安装教程

简介: Webpack 安装教程

Webpack 是一个前端资源加载/打包工具。


安装 Webpack

使用 cnpm 安装 webpack:


cnpm install webpack -g


创建项目

接下来我们创建一个目录 app:

mkdir app


在 app 目录下添加 runoob1.js 文件,代码如下:

app/runoob1.js 文件
document.write("It dashu.");
app/index.html 文件
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
    </body>
</html>


接下来我们使用 webpack 命令来打包:

webpack dashu.js bundle.js


配置文件

app/webpack.config.js 文件
module.exports = {
    entry: "./dashu.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style-loader!css-loader" }
        ]
    }
};


插件

cnpm install webpack --save-dev


安装

cnpm install webpack-dev-server -g


运行

webpack-dev-server --progress --colors

相关文章
|
5月前
|
缓存 JavaScript 前端开发
webpack超详细教程,学webpack看这一篇就够了!(下)
webpack超详细教程,学webpack看这一篇就够了!(下)
|
5月前
|
缓存 JSON 前端开发
webpack超详细教程,学webpack看这一篇就够了!(上)
webpack超详细教程,学webpack看这一篇就够了!(上)
|
JavaScript 数据安全/隐私保护
Webpack 安装使用(详细步骤)
Webpack 安装使用(详细步骤)
110 1
|
JavaScript 数据安全/隐私保护
Webpack 安装
Webpack 安装
64 0
|
缓存 资源调度 前端开发
Webpack 2 入门教程
Webpack 2 入门教程
41 0
|
缓存 JSON 自然语言处理
webpack 笔记
1.1 webpack 五个核心概念 1.1.1 Entry 入口,指示webpack以哪个文件为入口起点开始打包,分析构建内部依赖图
96 0
|
前端开发 JavaScript API
webpack的安装和使用
为前端工程化而生:webpack致力于解决前端工程化,特别是浏览器端工程化中遇到的问题,让开发者集中注意力编写业务代码,而把工程化过程中的问题全部交给webpack来处理
|
前端开发 JavaScript
Webpack教程
Webpack教程
108 0
|
资源调度 前端开发 JavaScript
Webpack之知识初探索,搭建一个简单的webpack开发环境
Webpack之知识初探索,搭建一个简单的webpack开发环境
103 0
|
前端开发 JavaScript
webpack怎么安装和配置?
先全局安装 : npm i webpack webpack-cli -g 在工作文件夹 初始化 npm init -y 会出现一个package.json文件 在工作文件夹 根目录新建一个配置文件 ,js格式 webpack.