webpack2

webpack2

less-loader

安装npm install --save-dev less-loader less

postcss-loader

安装npm i -D postcss-loader autoprefixer

建文件poctcss.config.js

const autoprefixer = require("autoprefixer");
module.exports = {
    plugins: [autoprefixer({
        //last 2 versions兼容最近的两个版本，>1%指全球浏览器的市场份额大于1%
        overrideBrowserslist: ["last 2 versions", ">1%"],
    })],
}

file-loader（处理静态资源模块）

原理是把打包入口中识别出的资源模块，移动到输出目录，并且返回一个地址名称

场景：就是当我们需要模块，仅仅是从源代码挪移到打包⽬目录， 就可以使⽤用file-loader来处理理，txt，svg，csv，excel，图⽚片资 源啦等等

安装npm install --save-dev file-loader

再index.js 中代码

import pic from "../images/01.png";
// console.log(add(2, 3))
var img = new Image();
img.src = pic;
var root = document.getElementById("root");
root.appendChild(img);

再webpack.config.js中

{
                test: /\.png$/,
                use: {
                    loader: "file-loader",
                    options: {
                        //   [ext]老资源模块的后缀
                        name: "[name]_[hash:6].[ext]",
                        //把图片放到dist目录下的images
                        outputPath: "images/"
                    }
                }
            },

url-loader file-loader加强版本(包含file-loader全部功能)

安装：npm install url-loader -D

HtmlWebpackPlugin

htmlwebpackplugin会在打包结束后自动生成一个html文件，并把打包生成的js模块引入到该html种中。

安装npm install --save-dev html-webpack-plugin

引入并且运用

const HtmlWebpackPlugin = require("html-webpack-plugin")
 new HtmlWebpackPlugin({
            //模板文件路径，支持加载器
            template: "./src/index.html",
            //输出的html名，默认是index.html。也可以直接配置带有子目录
            filename: "index.html",
        })

devtool（默认开启，精确定义错误信息)

若要关闭，可配置

devtool:"none"

生产环境不建议开启sourse-map,开发环境默认开启

eva:速度最快，使用eva包裹模块代

sourse-map：产生.map文件

cheap：较快，不含列信息

Module：第三方模块，包含loader的sourcemap（比如jsx to js ， babel的sourcemap）
inline： 将.map作为DataURI嵌入，不单独生成.map文件

WebpackDevServer(提高速率)

转到内存里执行了，提高速率

1，安装 npm install webpack-dev-server -D

2，再package.json中的script标签中加入

 "scripts": {
        "dev": "webpack-dev-server"
    },

3,执行npm run dev

4，再webpack.config.ja中配置

devServer:{
        //设置服务器访问路径，也可以是相对路径
        contentBase:path.resolve(__dirname,"./dist"),
        //自动打开浏览器窗口
        open:true,
        post:8080
    },