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处理。