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文件才可以使用个loaderloader:'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--componentsbasic.js
cssmain.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 这里就不需要设置}}]}