首页 > 代码库 > Webpack 基础使用

Webpack 基础使用

使用webstorm编译:

1.新建一个工程(最基本的工程)

2.在webstorm的控制台,使用命令行     cnpm install webpack  -g  全局安装

3.安装完后,可以使用   webpack -h  查看webpack是否安装完成

4.之后,cnpm install webpack --save-dev   将webpack 安装到项目的依赖项

6.最好,安装  loader  ,cnpm install --save-dev  css-loader 和cnpm install --save-dev  style-loader 

7.在工程中,首先创建一个静态页面 index.html 和一个 JS 入口文件 entry.js(通过  webpack  生成)

8.用 一个  src  文件夹放源文件,包括css文件和js(包含js主文件main.js)

9.在当前根目录下创建一个   webpack.config.js  (1)var webpack = require(‘webpack‘);    (2

module.exports = {

       entry: ‘./src/main.js‘,

     output: {

        path: `${__dirname}/build`,
filename: ‘bundle.js‘
},
module: {
loaders: [
{test: /\.css$/, loader: ‘style!css‘}
]
}
};
10.在webstorm控制台 输入 webpack 即生成JS 入口文件 entry.js

Webpack 基础使用