webpack的基本使用

---

webpack 的 基本语法

webpack main.js build.js
入口文件 main.js 自动加载依赖
输出文件 build.js

---

使用 webpack.config.js进行命令的简化处理

webpack.config.js 默认配置文件，webpack会自动去找这个文件

// 默认配置文件，webpack.config.js// 执行，webpack自动找 webpack.config.js 内容进行相关内容的打包操作module.exports = {    entry: './main.js', // webpack 要打包的源文件 是 main.js    output: {        filename: './build.js'  // 打包后输出的文件名称, ./build.js 表示输出到当前目录下    }}

之后直接执行 webpack 就行了, webpack 会自己去找到 webpack.config.js 中的内容进行相应的打包工作

---

webpack 打包 css， (style-loader,css-loader)

webpack 本身是不支持 css 打包的，所以需要加载依赖

• style-loader
• css-loader

cnpm init 初始化一个 package.json文件
cnpm install style-loader css-loader --save-dev 利用package.json 进行管理依赖

下次可以直接利用 cnpm install进行依赖安装

注意： 在webpack.config.js 中配置下style-loader 和 css-loader，且有顺序要求，必须是先 style-loader 再 css-loader

webpack.config.js

// 默认配置文件，webpack.config.js// 执行，webpack自动找 webpack.config.js 内容进行相关内容的打包操作module.exports = {    entry: './main.js', // webpack 要打包的源文件 是 main.js    output: {        filename: './build.js',  // 打包后输出的文件名称, ./build.js 表示输出到当前目录下        path: './dist'    },    module: {        // rules 也可以使用 rules 代替 loaders         loaders: [            {                test: /\.css$/,   // 所有 .css 结尾的文件都被此loader 处理                // 如果写成 style!css 或者 css-loader!style-loader 都会报错                loader:'style-loader!css-loader'            }        ]    }}

---

autoprefixer-loader 兼容性处理包

autoprefixer-loader 作用： 自动在打包的过程中将css写法加上不同浏览器的前缀达到兼容不同浏览器的效果。

使用步骤：
1. 安装 cnpm install autoprefixer-loader --save-dev
2. webpack.config.js中添加autoprefixer-loader, 注意要放在style-loader和css-loader后面

module.exports = {    entry: './main.js', // webpack 要打包的源文件 是 main.js    output: {        filename: './build.js',  // 打包后输出的文件名称, ./build.js 表示输出到当前目录下        path: './dist'    },    module: {        // rules 也可以使用 rules 代替 loaders         loaders: [            {                test: /\.css$/,   // 所有 .css 结尾的文件都被此loader 处理                // 如果写成 style!css 或者 css-loader!style-loader 都会报错                loader:'style-loader!css-loader!autoprefixer-loader'            }        ]    }}

---

webpack 打包 less

步骤：
1. 安装： cnpm install less-loader less --save-dev， style-loader, css-loader之前已经安装过了，也是必须的
2. 在webpack.config.js 中添加 less-loader

module.exports = {    entry: './main.js', // webpack 要打包的源文件 是 main.js    output: {        filename: './build.js',  // 打包后输出的文件名称, ./build.js 表示输出到当前目录下        path: './dist'    },    module: {        // rules 也可以使用 rules 代替 loaders         loaders: [            // 处理 css            {                test: /\.css$/,   // 所有 .css 结尾的文件都被此loader 处理                loader:'style-loader!css-loader!autoprefixer-loader'            },            // 处理 less            {                test: /\.less$/,   // 所有 .less 结尾的文件都被此loader 处理                loader:'style-loader!css-loader!autoprefixer-loader!less-loader'            }        ]    }}

---

webpack 打包 sass

步骤
1. 安装依赖包 style-loader, css-loader, sass-loader, node-sass
2. 配置webpack.config.js 文件

cnpm install sass-loader node-sass --save-dev

loaders: [    // 处理 css    {        test: /\.css$/,   // 所有 .css 结尾的文件都被此loader 处理        loader:'style-loader!css-loader!autoprefixer-loader'    },    // 处理 less    {        test: /\.less$/,   // 所有 .less 结尾的文件都被此loader 处理        loader:'style-loader!css-loader!autoprefixer-loader!less-loader'    },    // 处理 sass    {        test: /\.scss$/,   // 所有 .scss 结尾的文件都被此loader 处理        loader:'style-loader!css-loader!autoprefixer-loader!sass-loader'    }]

---

利用 webpack 来打包图片

步骤：
1. 安装依赖 url-loader, file-loader, cnpm install url-loader file-loader --save-dev
2. 将url-loader, file-loader 配置到 webpack.config.js 文件中

webpack.config.js

// 默认配置文件，webpack.config.js// 执行，webpack自动找 webpack.config.js 内容进行相关内容的打包操作module.exports = {    entry: './main.js', // webpack 要打包的源文件 是 main.js    output: {        filename: './build.js',  // 打包后输出的文件名称, ./build.js 表示输出到当前目录下        path: './dist'    },    module: {        // rules 也可以使用 rules 代替 loaders         loaders: [            {                test: /\.css$/,   // 所有 .css 结尾的文件都被此loader 处理                loader:'style-loader!css-loader!autoprefixer-loader'            },            {                test: /\.(png|jpg)$/,  // 匹配文件的后缀名是 .png 或者 .jpg                loader: 'url?limit=20000' // url就是url-loader的缩写，表示图片大小小于20000，                // 就将这张图片编译成base64的字符串使用，否则就把图片打包编译到文件夹中                // 这里注意 限制的 值不能太大，太大会导致build.js 文件过大，影响性能            }        ]    }}

---

利用 url-loader 完成字体图标的解析

在loader中加入 ttf文件的解析，url-loader可以解析 png，jpg，ttf等文件，需要其他文件可以自行添加扩展名

module: {        loaders: [            {                test: /\.css$/,                loader:'style-loader!css-loader!autoprefixer-loader'            },            {                test: /\.(png|jpg|ttf)$/,  // 匹配文件的后缀名是 .png 或者 .jpg 或者 ttf                loader: 'url?limit=20000'             }        ]    }

---

webpack-plugin 实现页面刷新和自动打包

webpack server 解决项目打包图片路径问题

步骤：
1. 安装： cnpm install webpack webpack-dev-server --save-dev
2. webpack-dev-server --inline --hot --open --port 3008
（浏览器自动刷新 –inline， 热编译 –hot, 端口打开在 3008 ）
3. 这个指令这么长，想缩短，就在package.json配置

{  ...,  "scripts": {    "dev": "webpack-dev-server --inline --hot --open --port 3008"  },  "author": "",  "license": "ISC"}

配置完成之后 npm run dev 就可以运行了

安装html-webpack-plugin

html-webpack-plugin可以实现自动生成一个index.html 页面存在内存中，只有这样，webpack-dev-server才能保证页面的实时刷新实时打包
cnpm install html-webpack-plugin --save-dev

然后配置webpack.config.js

var HtmlwebpackPlugin = require('html-webpack-plugin');module.exports = {    entry: './src/main.js',    output: {        filename: './build.js',        path: './dist'    },    module: {        loaders: [            {                test: /\.css$/,                loader:'style-loader!css-loader!autoprefixer-loader'            },            {                test: /\.(png|jpg|ttf)$/,                 loader: 'url?limit=20000'             }        ]    },    plugins: [        new HtmlwebpackPlugin({            title: "index",  //"生成的页面标题"            filename: "index.html", // 生成的文件名称            template: "1.html" // 根据 1.html 这个模板文件来生成        })    ]}

---

利用 babel-loader等包实现 es6 转 es5

// require('../statics/css/site.css');// require 对于 es6 的语法import '../statics/css/site.css';

为什么要转换，因为浏览器不认识import

步骤：

1. 安装相应依赖包

   cnpm install babel-core –save-dev
   cnpm install babel-loader –save-dev
   cnpm install babel-preset-es2015 –save-dev （转码器）

2. 在webpack.config.js中的loaders:[] 中配置
   ( 1 )第一种

    {    test:/\.js$/,    loader: 'babel?presets[]=es2015' }

   ( 2 ) 第二种，利用 webpack.config.js 中的 babel 这个属性来配置会更好
   使用第二种还需要安装一个依赖

   cnpm install babel-plugin-transform-runtime –save-dev

   var HtmlwebpackPlugin = require('html-webpack-plugin');module.exports = {    entry: './src/main.js',    output: {        filename: './build.js',        path: './dist'    },    module: {        loaders: [            {                test: /\.css$/, loader:'style-loader!css-loader!autoprefixer-loader'            },            {                test: /\.(png|jpg|ttf)$/,                 loader: 'url?limit=20000'             },            {                test: /\.js$/,                loader: 'babel',                exclude: /node_modules/  //表示所有 node_modules文件夹下的不进行 load            }        ]    },    plugins: [        new HtmlwebpackPlugin({            title: "index",  //"生成的页面标题"            filename: "index.html", // 生成的文件名称            template: "1.html" // 根据 1.html 这个模板文件来生成        })    ],    babel: {        presets: ['es2015'],        plugins: ['transform-runtime']  // 实时转换，保证编译 vue文件时,也能正常编译转换    }}