webpack教程

标签：.config   全局   ini   新建   令行   style   执行   项目文件   作用   

2、建立项目
建立项目文件夹，进入项目文件夹目录下，然后新建一个package.json的文件在项目根目录下

mkdir testwebpack
cd  testwebpack
npm init  //询问一些问题:按回车选择默认值 自动生成文件

至此，webpack安装完成

3、在命令行中分别执行以下命令，安装对应的插件（--save-dev作用是安装的插件的同时，将插件名写入package.json的devDependencies列表中）
npm install webpack --save-dev
npm install jquery --save-dev
npm install style-loader css-loader --save-dev
npm install extract-text-webpack-plugin –-save-dev

4、创建webpack.config.js

module.exports = {
  entry: ‘./main.js‘,  /*你要打包的js文件*/
  output: {
    filename: ‘bundle.js‘  /*打包后生成的文件*/
  },
   module: {
        rules:[
          {
            test: /\.css$/, /*引入css文件配置*/
            use: [ ‘style-loader‘, ‘css-loader‘ ]
          },
        ]
  },
  module: {
        rules:[
          {
            test: /\.(png|jpg)$/, /*引入图片文件配置*/
            use: [
              {
                loader: ‘url-loader‘,
                options: {
                  limit: 8192
                }
              }
            ]
          }
        ]
    }
};

配置文件参数说明：

• entry： 是 页面入口文件配置 （html文件引入唯一的js 文件）
• output：对应输出项配置
• path ：入口文件最终要输出到哪里，
• filename：输出文件的名称
• publicPath：公共资源路径
• webpack：普通打包
• webpack -p：压缩打包
• webpack -p -w：监听所有需要打包的代码，只要有代码被改动并保存后，就会自动进行打包

webpack教程

标签：.config   全局   ini   新建   令行   style   执行   项目文件   作用   

原文地址：http://blog.51cto.com/9161018/2322619