wpk 4.0 体验

个人使用经验

环境的搭建

1.npm的安装和使用方法可以参考
阮老师的教程
http://javascript.ruanyifeng....
2.需要一个好一点的编辑器比如vscode，webstrom ，当然使用sublime 也可以，不过这样就要使用window的命令行cmd 打开命令行窗口

开始

创建目录

webpack_test
--src
    |----img
    |----js
        |-----components
        |-----vuePages
    |----fonts
    |----css
    |----data
|--tmp.html
|--webpack.config.js
|--package.json

配置

webpack.config.js

let config = {
    
}
module.exports = config;

package.json

初始化配置默认选项
$npm init -y
-package.json
{
  "name": "20180806",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

$npm i -D webpack webpack-cli

等价于 $npm install webpack webpack-cli --save-dev

//package.json
"devDependencies": {
    "webpack": "^4.16.4",
    "webpack-cli": "^3.1.0"
  }

同样的方法把webpack的各种 loader plugins安装好，
如果按照不顺利大多数可能是网络的问题，那可以尝试使用cnpm 也就是国内的淘宝镜像进行安装。不过也需要先安装cnpm。

配置 entry

package.json

$npm i -D html-webpack-plugin

webpack.config.js

const fs = require('fs');
const webpack = require('webpack');
const htmlWebpackPlugin= require('html-webpack-plugin');
let config = {
    ...
    entry:{},
    ...
    plugins:[]
    ...
}

fs.readdirSync('./src/js').forEach(function(itm,idex){
    if(/\.js$/.test(itm)){
        var chunk = itm.slice(0,itm.length-3);
        config.entry[chunk] = './src/js/'+itm;
        var page = new htmlWebpackPlugin({
            filename:chunk+'.html',
            template:'./src/index.html',
            chunk:[chunk]
        })
        config.plugins.push(page)
    }
})

配置 output

output:{
        path:path.resolve(__dirname,'dist'),
        filename:'Script/[name].js',
        publicPath: "./"//用于去 对于输出的 path 里面的引用路径
        // webpack-dev-server环境下，path、publicPath、区别与联系
        // path：指定编译输出的路径（/dist/），并不是html中对js文件的引用路径。
        //     publicPath：虚拟目录，自动指向path编译目录, 配置html中的js文件引用路径,通常是 publicPath+path

    },

配置es6语法解析

$npm i -D babel-loader babel-core babel-preset-env

webpack.config.js

let config = {
    ...
    module:{
        rules:[
            {
                test:/\.js$/,//适配js文件才可以使用个loader
                loader:'babel-loader'
            }
        ]
    },
    ...
}

配置babel-preset-env 需要新增 .babelrc json文件；

.babelrc

{
  "presets": [
    ["env", {
      "targets": {
        "node": "current"
      }
    }]
  ]
}

如需知道更多,打开env在npm的文档 ：https://www.npmjs.com/package...

webpack-dev-server

$npm i -D webpack-dev-server

package.json

...
script:{
    ...
    "dev":"webpack-dev-server --color --open --precess"
}

配置css

这个时候在css 目录下添加2个文件

--css
    --index.scss
    --reset.scss

//index.scss
body{
    font-size:20px;
    color:#f90;
}

//reset.scss
*{
    border:0;
    margin:0;
    padding:0;
}

//index.js
import index from '../css/index.scss'
import reset from '../css/reset.scss'

首先安装：
sass-loader node-sass 解析 sass|scss
css-loader 识别css，style-loader 解析css
postcss-loader 和 autoprefixer（自动添加前缀的插件）；

$npm i -D css-loader style-loader postcss-loader sass-loader node-sass extract-text-webpack-plugin@next

webpack.config.js

...
let ExtractTextPlugin = require('extract-text-webpack-plugin');
let autoPrefixer = require('autoprefixer');
...
module:{
    rules:[
    ...
        {
            test:/\.css$/,
            use:ExtractTextPlugin.extract({
                publicPath:'../',//这里的公共路径,来配置css中图片及其他的引用文件路径
                fallback:'style-loader'
                loader:['css-loader',{
                    loader:'postcss-loader',
                    options: {
                        plugins: [
                            autoPrefixer()
                        ]
                    }
                },'sass-loader']
            })
        }
    ]
},
plugins:[
    ...
    new ExtractTextPlugin('Style/[name].css'),
    
]

文件分模块 抽离

以前2.0版本的时候用的是
new webpack.optimize.CommonsChunkPlugin(options);
到现在4.0版本改用
config.optimization.splitChunks

新建

js
--main.js
   --components
   basic.js
css
   main.scss

//basic.js
console.log('basic.js!!!')

//main.js
import reset from '../css/reset.scss'
import index from '../css/main.scss'
import basic from './components/basic'

console.log('index.js!!!')

//index.js
import reset from '../css/reset.scss'
import index from '../css/index.scss'
import basic from './components/basic'
console.log('index.js!!!')

//main.scss
.showimg{
    height: 400px;
    width:400px;
    background:url(../img/2.gif) no-repeat;
    background-size: 100%;
}

webpack.config.js

...
optimization:{
    splitChunks: {
        cacheGroups: {
            commons: {
                // test:/[\\/]node_modules[\\/]/,
                name: "commons",
                chunks: "initial",
                minChunks: 2
            }
        }
    }
}
...

加载图片文件

如想在 html 插入图片文件
可以使用 webpack的html变量语法
<img src="<%=require('./img/1.jpg')%>" alt="">

如果是在css里面的图片方法如下：

$npm i -D url-loader file-loader

webpack.config.js

...
    {
        test:/\.jpe?g|gif|png|svg|bmp$/,
        use:[{
            loader:'url-loader',
            options:{
                limit:8192,
                name:'Images/[name].[ext]',
                //publicPath:'../'//这里的publicPath 可以单独配置图片的引用路径
            }
        }]
    }

加载字体文件

webpack.config.js

...
    {
        test:/\.(woff2?|eot|svg|ttf)$/,
        use: [{
            loader: 'file-loader',
            options: {
                name: 'Fonts/[name]-[hash].[ext]',
                // publicPath: "../"在output或者css配置module那设置了publicPath 这里就不需要设置
            }
        }]
    }