webpack

• 安装
• 配置文件
• 配置入口以及出口文件
• 热更新
• css文件打包
• js文件打包
• html文件打包
• 图片处理
• css分离
• 通过src引入img
• 打包和分离stylus
• postcss浏览器前缀
• 去掉无用的css
• babel
• 调试

WebPack是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言，并将其转换和打包为合适的格式供浏览器使用。

安装

npm install -g webpack

npm init

会生成一个package.json

然后在此文件夹输入

npm install --save-dev webpack

注意：不可以让package.json的name为webpack

安装后会生成一个package-lock.json文件，用来记录当前状态下实际安装的各个npm package的具体来源和版本号

更新：如果有老项目但是不想把之前的依赖包删除进入package.json中，

 "devDependencies": {
    "webpack": "^3.10.0"
  }

版本号改成最新的，然后删除node_moudules;在运行 npm install就可以了

新建一个文件夹src 放所有的源文件夹；

再建一个文件夹dist 放所有的生产后的文件

↑ 返回Top

配置文件

webpack.config.js

基本结构

module.exports={
    entry:{},      //入口文件的配置项

    output:{},     //出口文件的配置项

    module:{},    //模块：例如解读CSS,图片如何转换，压缩

    plugins:[],    //插件，用于生产模版和各项功能

    devServer:{} //配置webpack开发服务功能
}

↑ 返回Top

配置入口以及出口文件

const path = require('path');
module.exports = {
    entry:{
        entry:'./src/entry.js'
    },
    output:{
        // 绝对路径
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js'
    }
}

多入口多出口

entry:{
        entry:'./src/entry.js',
        entry2:'./src/entry2.js'
    },
output:{
    path:path.resolve(__dirname,'dist'),
    filename:'[name].js'
},

↑ 返回Top

热更新

devServer:{
    contentBase:path.resolve(__dirname,'dist'),
    host:'IP地址（或者localhost）',
    compress:true, //服务器压缩
    port:8000
}

host尽量用ip地址在终端输入ipconfig查看ip地址

运行前需要在开发环境安装webpack-dev-server

npm install webpack-dev-server --save-dev

安装后发现：

webpack-dev-server 不是内部或外部命令，也不是可运行的程序 或批处理文件。

这是因为它安装在node_module中，解决办法是在package.json中修改script

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

然后在终端运行 npm run server

↑ 返回Top

css文件打包

• 步骤1：需要两个加载器style-loader,css-loader
• 步骤2：在module中添加rules
• 步骤3：引入样式

// 处理url
npm install style-loader --save-dev
// 处理样式，标签
npm install css-loader --save-dev

在module中添加rules

module:{
    rules:[
        {
            test:/\.css$/,
            use:[{
                loader:'style-loader'
            },{
                loader:'css-loader'
            }]
        }
    ]
}

在entry.js中引入样式

import css from './css/index.css';

↑ 返回Top

js文件打包

一般在生产环境不会压缩，不然难调试

• 步骤1：引入包 uglifyjs-webpack-plugin
• 步骤2：在plugins中添加new uglify()

引入包 uglifyjs-webpack-plugin(不用单独npm install)

const uglify = require('uglifyjs-webpack-plugin');

在plugins中添加new uglify()

plugins:[
    new uglify()
]

↑ 返回Top

html文件打包

• 步骤1：引入包 html-webpack-plugin(需要npm install)
• 步骤2：在plugins中添加htmlPlugin

const htmlPlugin = require('html-webpack-plugin');

安装 html-webpack-plugin

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

然后在plugins添加htmlPlugin

 plugins:[
    new htmlPlugin({
        minify:{
            removeAttributeQuotes:true
        },
        hash:true,
        template:'./src/index.html'
    })
]

↑ 返回Top

图片处理

安装

npm install --save-dev file-loader url-loader

配置

//模块：例如解读CSS,图片如何转换，压缩
module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      },{
         test:/\.(png|jpg|gif|jpeg)$/ ,
         use:[{
             loader:'url-loader',
             options:{
                 limit:5000
             }
         }]
      }
    ]
},

↑ 返回Top

css分离

1、安装 extract-text-webpack-plugin 插件

npm install extract-text-webpack-plugin --save-dev

在webpack.config.js文件引入插件(loader不需要引入，插件必须引入)

const extractTextPlugin = require("extract-text-webpack-plugin")

2、在配置文件中导入插件

module: {
    rules: [
      {
        test: /\.css$/,
        use: extractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      }
    ]
  },
plugins: [
    new extractTextPlugin('css/index.css')
]

分离之后图片路径就不对了，解决办法设置一个绝对路径

const website = {
  publicPath: 'http://192.168.1.109:9527/'
}
// module.exports
 output: {
    path: path.resolve(__dirname, 'dist'), // 绝对路径
    filename: 'bundle.js',
    publicPath: website.publicPath
  },

↑ 返回Top

通过src引入img

之前引入图片都是以背景方式才可引入 现在则要用img标签引入，需要用到插件html-loader

安装

npm install --save-dev html-loader

module: {
rules: [
    {
    test: /\.css$/,
    use: extractTextPlugin.extract({
        fallback: "style-loader",
        use: "css-loader"
    })
    },{
    test:/\.(png|jpg|gif|jpeg)$/ ,
    use:[{
        loader:'url-loader',
        options:{
            limit:5000,
            outputPath:'images/',
        }
    }]
    }, {
    test: /\.(htm|html)$/i,
    use: [{
        loader: 'html-loader'
    }]
    }
]
},

↑ 返回Top

打包和分离stylus

首先安装

npm install stylus-loader stylus --save-dev

要在entry.js引入

import stylus from './css/coral.styl';

webpack.config.js

{
    test: /\.styl$/,
    use: extractTextPlugin.extract({
        use: [{
            loader: "css-loader"
        }, {
            loader: "stylus-loader"
        }],
        // use style-loader in development
        fallback: "style-loader"
    })
}

↑ 返回Top

postcss浏览器前缀

安装loader

npm install --save-dev postcss-loader autoprefixer

引用

rules: [
  {
    test: /\.css$/,
    use: extractTextPlugin.extract({
      fallback: "style-loader",
      use: ["css-loader", "postcss-loader"]
    })
  }

创建postcss.config.js文件

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

↑ 返回Top

去掉无用的css

安装

npm i -D purifycss-webpack purify-css

引入

webpack.config.js

const glob = require('glob')
const PurifyCssPlugin = require('purifycss-webpack')

↑ 返回Top

babel

安装

npm install --save-dev babel-loader babel-core babel-preset-es2015

支持ES7，ES8

安装npm install --save-dev babel-preset-env

引入

 {
    test: /\.js$/,
    use: {
      loader: 'babel-loader',
    },
    // 忽视
    exclude: /node_modules/
  }

新建文件.babelrc

{
  "presets": ["env"]
}

↑ 返回Top

调试

/**
* source-map  独立map 行 列 时间长 内容详细
* cheap-moudle-source-map 独立 行 不包括列
* eval-source-map 开发阶段 上线删除 行 列
* cheap-moudle-eval-source-map 列
*/
devtool: 'eval-source-map',//开发阶段 调试

↑ 返回Top