Webpack - 基本配置

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