webpack

常用命令

创建新的文件夹

mkdir 文件夹名

初始化npm项目

npm init

安装webpack

npm install webpack –save-dev

引入另外文件

require(‘…’)

打包单独文件

webpack hello.js hello.bundle.js

安装css-loader和styel-loader

npm install css-loader style-loader –save-dev

通过命令行使用loader

webpack hello.js hello.bundle.js –module-bind
“css=style-loader!css-loader”

在require中引入loader

require(‘style-loader!css-loader!./style.css’)

打包时输出打包的过程

–progress

打包时输出打包的模块

–display-modules

打包时输出打包的原因

–display-reasons

打包时输出彩色文字

–colors

文件更改，自动更新

webpack hello.js hello.bundle.js –watch

项目文件的基本配置

新建文件夹

mkdir webpack-demo

初始化npm

npm init

安装依赖

npm install webpack –save-dev

配置出入口文件

var path = require('path');
module.exports = {
  //entry: './src/script/main.js',//入口文件
    entry: {

      main: './src/script/main.js',

      //a: ['./src/script/a.js', './src/script/b.js'],
      a: './src/script/a.js',
      b: './src/script/b.js'

    },
    output: {
        path: path.resolve(__dirname,'dist/'), //打包后文件存放的位置,注意这个要是绝对路径
        filename: 'js/[name]-[chunkhash].js',//打包后的文件名
        publicPath: 'http://xxx.xx.com'
    }
}

指定配置文件
默认是 webpack.config.js

webpack –config webpack.dev.config.js

配置package.json文件

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "webpack": "webpack --config webpack.config.js --progress --display-modules --colors --display-reasons"
  }

生成项目中的html页面

安装插件

npm install html-webpack-plugin –save-dev

配置参数

plugins:[
        new htmlWebpackPlugin({
            filename: 'index-[hash].html',//指定文件名字
            template: 'index.html',
            inject: false,//脚本引入的位置head or body
            title: '这是动态生成的Title',
            date: new Date(),
            minify: {//压缩代码
                removeComments: true,
                collapseWhitespace: true
            }
        })
    ]

在项目根目录下的index.html文件中，需要插值的地方用这种

<title><%= htmlWebpackPlugin.options.title %></title>方式来动态的插入值

通过使用html-webpack-plugin来控制引入的脚本是放在头部还是放在body中

<script type='text/javascript' src='<%= htmlWebpackPlugin.files.chunks.a.entry %>'></script>

项目中的资源文件

loader的处理方式是从右向左

loader的使用方法有三种：

• 在引入文件的时候

require(‘style-loader!css-loader!./style.css’)

• 在命令行中

webpack a.js a.bundle.js –module-bind “css=style-loader!css-loader”

• 在配置文件中

以babel为例，（用于转换ES6语法）需要先安装babel

cnpm install –save-dev babel-loader babel-core

lastest是babel loader的一个插件，也需要安装

cnpm install –save-dev babel-preset-latest

modules:[
        {
            test: /\.js$/,
            loader: 'babel'
            query:{
                'presets': 'lastest'
            }
        }
    ]

另外也可以在loader后面加’?’来配置。如

require(“url-loader?mimetype=image/png!./file.png”);

或者是

{ test: /.png$/, loader: “url-loader?mimetype=image/png” }

或者以命令行的形式

webpack –module-bind “png=url-loader?mimetype=image/png”

也可在项目的根目录下创建.babelrc文件来进行配置

{
    'presets': ['lastes']
}

还有一种方法，就是在package.json中进行配置

'babel':{
     'presets':[ 'lastest']
  }

处理css资源

在入口文件app.js中通过ES6的import引入文件：import ‘./css/common.css’

通过npm安装所需要的style-loader和css-loader.

{
   test: /\.css$/,
   loader: 'style-loader!css-loader'
}

postcss-loader结合autoprefixer给属性添加浏览器前缀

通过给css-loader加参数，可以是通过@import引进的外部css文件也可以自动加上浏览器前缀

{
    loader: 'css-loader',
    options: {
        importLoaders: 1
      }
}

不用新建postcss.config.js的情况下，可在plugins中写入下面的代码就可实现

 new webpack.LoaderOptionsPlugin({
    options : {
        postcss : function(){
            return [
                require('autoprefixer')({
                    broswers : ['last 5 versions']
                })
            ];
        }
    }
})

图片的处理

file-loader、url-loader用于处理图片
image-webpack-loader

{
 test: /\.(png|jpg|gif|svg)$/i,
   loader: 'file-loader',
   options: {//压缩后的路径和名称
       name: 'image/[name]-[hash:5].[ext]'
   }
}

在模板或者组件中想使用图片的相对地址引用，可以用下面的方法：

<img src="${require('../../img/5.jpg')}" alt="">

url-loader在指定的大小范围内时，将图片转换成base64编码，如超过指定的大小，交给file-loader处理。