Webpack - 基本配置

2018-06-20 本文已影响19人 zz77zz

webpack - 最热门的前端资源模块化管理和打包工具

简单设置(单页面)

先安装webpack npm install webpack --save-dev.
在package.json里添加写脚本方便使用.

"webpack": "webpack --config webpack.config.js --progress --display-modules --colors --display-reason"

npm run webpack 就可以起到--config webpack.config.js效果.

webpack.config.js文件配置如下:

  //先安装htmlwebpackplugin npm install htmlwebpackplugin --save-dev
  var htmlWebpackPlugin = require('html-webpack-plugin');
  module.exports = {
  // context:上下文环境 = 根目录,
  entry: {
      main:'./src/js/main.js',
      bain: './src/js/bain.js'
  },
  output: {
      //输出路径
      path: './dist',
      //这里的[hash][chunkhash]指的其实就是版本号，MD5算法保证文件的唯一性
      filename: 'js/[name]-[chunkhash].js',
      //代码发布时的 地址
      publicPath: 'http://aili.com/'
  },
  
  plugins: [
      new htmlWebpackPlugin({
          // filename: 'index-[hash].html',filename: 'index-[chunkhash].html',生成后的文件名
          filename: 'index.html',
          //模板文件,就是项目根目录的index.html
          template: 'index.html',
          //将引入文件插入到哪里,body,head,false
          inject: 'body',
          title:'webpack is fuck',
          date: new Date(),
          //插件的参数: 删除注释空格之类的其他可以去插件官网找
          minify:{
              removeComments:true,
              collapseWhitespace: true
              }
          })
      ]
  }

htmlwebpackplugin
htmlwebpackplugin.minify

多页面设置

分别有a.js,b.js,c.js

var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// context:,
entry: {
    main:'./src/js/main.js',
    // bain: './src/js/bain.js',
    a: './src/js/a.js',
    b: './src/js/b.js',
    c: './src/js/c.js'
},
output: {
    path: './dist',
    filename: 'js/[name].js',
    publicPath: 'http://aili.com/'
},

plugins: [
    new htmlWebpackPlugin({
        // filename: 'index-[hash].html',
        filename: 'index.html',
        template: 'index.html',
        inject: 'body',
        title:'webpack is fuck',
        date: new Date(),
        minify:{
            removeComments:true,
            collapseWhitespace: true
        }
    }),
    new htmlWebpackPlugin({
        // filename: 'index-[hash].html',
        filename: 'a.html',
        template: 'index.html',
        // inject: 'body',
        inject: false,
        title:'This is a.html',
        //chunks：引用哪些js,这里用到的公用main.js和a.js
        chunks: ['main','a']
    }),
    new htmlWebpackPlugin({
        // filename: 'index-[hash].html',
        filename: 'b.html',
        template: 'index.html',
        // inject: 'body',
        inject: false,
        title:'This is b.html',
        chunks: ['main','b']
    }),
    new htmlWebpackPlugin({
        // filename: 'index-[hash].html',
        filename: 'c.html',
        template: 'index.html',
        // inject: 'body',
        inject: false,
        title:'This is c.html',
        chunks: ['main','c']
    }),
]
}

这里遇到一个问题，公用的main和对应的各个js不用htmlwebpackplugin.chunks怎么实现？

可以自己配置个参数然后循环plugins判断是否是当前配置的参数

new htmlWebpackPlugin({
// filename: 'index-[hash].html',
filename: 'a.html',
template: 'index.html',
inject: 'body',
title:'This is a.html',
//自定义参数
isThat_a:true
})
然后再对应的文件下(这里是a.js)循环插件参数

<% for(var key in htmlWebpackPlugin.options){%>
<%= key%> : <%= JSON.stringify(htmlWebpackPlugin.options[key])%>
if(isThat_a){<script type="text/javascript" src="<%= htmlWebpackPlugin.files.chunks.a.entry %>">
</script>}
<%}%>

Loaders

loader - Babel

loader使用方法 - 其中介绍了三种方法 require configuration cli.

require:

  require("./loader!./dir/file.txt");
  require("jade!./template.jade");
  require("!style!css!less!bootstrap/less/bootstrap.less");

configuration:

  {
      module: {
          loaders: [
              { test: /\.jade$/, loader: "jade" },
              // => "jade" loader is used for ".jade" files
              { test: /\.css$/, loader: "style!css" },
              // => "style" and "css" loader is used for ".css" files
              // Alternative syntax:
              { test: /\.css$/, loaders: ["style", "css"] },
          ]
      }
  }

我用了第二种(configuration),先下载babel npm install babel--save-dev.更改配置文件

Babel-官网插件 - 这里用到的插件presets.当然得先下载npm install babel-preset-latest(这里可以是2015 2016 2017 latest).

  var htmlWebpackPlugin = require('html-webpack-plugin');
  //引用nodejs自带的path模块
  var path = require('path');
  module.exports = {
  context:__dirname,
  entry: './src/app.js',
  output: {
      path: './dist',
      filename: 'js/[name].bundle.js',
  },
  module: {
      loaders:[
          {
              //js
              test:/\.js$/,
              loader:'babel',
              //tigao 打包速度
              exclude:path.resolve(__dirname, "node_modules"),
              //include:'./src',
              query:{
                  presets:['latest']
              }
          }
      }
  ]
  },
  plugins: [
  new htmlWebpackPlugin({
      // filename: 'index-[hash].html',
      filename: 'index.html',
      template: 'index.html',
      inject: 'body'
  })
  ]
  }

loader - css

npm install style-loader+css-loader+postcss-loader+autoprefixer --save-dev
其中：

  loader: "style-loader!css-loader!'postcss-loader" ,
  loader:['style-loader','css-loader','postcss-loader'] //这两个写法一样

autoprefixer调用方法:在根目录下添加postcss.config.js文件或在webpack.config.js文件里增加postcss模块

    module.exports = {
    plugins: [
        require('autoprefixer')({ browsers: ["last 5 versions"] })
    ] 
    }

增加postcss模块

loader - less+sass

分别安装less sass

npm install less -save-dev
npm install less-loader --save-dev

{
test: /.less$/,
loader: "style-loader!css-loader!postcss-loader!less-loader"
}

loader - HTML

npm-install html-loader --save-dev

写个layer.js

import tpl from './layer.html';
import './layer.less';

function layer(){
    return {
        name:'layer',
        tpl:tpl
    };
    alert("Im layer");
}

export default layer;

layer.html

<div class="layer">
    <div>This is Layer!!!</div>
</div>

app.js(入口js)

import './css/common.css';
import layer from './components/layer/layer.js';
const App = function (){
    var dom = document.getElementById("app");
    var layer_r = new layer();
    dom.innerHTMl = layer_r;
}

new App();

然后直接在index.html中定义好用这个模块的加载点就ok.(<div id="app"></div>)
its work！！ amazing man
[图片上传失败...(image-962629-1529468515878)]

loader - template

这里我用ejs模板 npm install ejs-loader --save-dev

{
    test: /\.tpl$/,   //这里可以自定义文件后缀,只用定义加载的模板文件即可
    loader: "ejs-loader"
}

layer.tpl

<div class="layer">
 <div>  this is the mustache-syntax - {{ this is the <%= name %> layer}}
<br/>
<% for(var i = 0;i<arr.length;i++) {%>
    <%= arr[i]%>
<%}%>
</div>
</div>

layer.js

import tpl from './layer.tpl';
import './layer.less';

function layer(){
    return {
        name:'layer',
        tpl:tpl
    };
    alert("Im layer");
}

export default layer;

app.js

import './css/common.css';
import layer from './components/layer/layer.js';
const App = function (){
    var dom = document.getElementById("app");
    var layer_r = new layer();
    dom.innerHTML=layer_r.tpl({         //这里对象里的值就是在 layer.js中定义的对象。
        name:'My name is Aili',  
        arr:['webpack','grunt','gulp']
    });
}

new App();

its work!!!

image

loader - image

图片有三种引用方式

模板文件用 <img>
css - background
还有index.html <img>
npm install file-loader --save-dev

webpack.config.js:

{
    test:/\.(png|jpg|gif|svg)$/i,
    loader:"file-loader"
}

模板文件用到的图片要做点处理:
本应是(<img src = "相对地址"> ---> <img src="${ require('相对地址') }" />)

最后优化图片加载 - file-loader(更改打包后文件的存放地址)+url-loader(转换为编码)+image-webpack-loader(压缩图片) 这三个配合使用效果更好。
so npm install 剩余的两个loader即可
所以最后配置文件变成了:

{
    test:/\.(png|jpg|gif|svg)$/,
    //url-loader的param: limit:图片压缩后大小超过1k，就转换成base64编码。
    loaders:["url-loader?limit:1000&name:assets/[name]-[hash:5].[ext]","image-webpack-loader"]
}

这只是打包和loader的基本配置，后续我在更新成开发环境的hot-reload等插件，webpack小白一枚。

代码地址

Github：@github