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 這裏就不須要設置
            }
        }]
    }