webpack4 sass babel vue2 标准工程模板 但是，webpack4还是需要n多优化部分，配置下来，实为不易。而实际开发也不需要浪费这个时间——了解即可
webpack 一直以来最饱受诟病的就是其配置门槛极高，配置内容极其复杂和繁琐，容易让人从入门到放弃，而它的后起之秀如 rollup、parcel 等均在配置流程上做了极大的优化，做到开箱即用，所以webpack 4 也从中借鉴了不少经验来提升自身的配置效率。愿世间再也不需要 webpack 配置工程师。
目前node-sass sass-loader 替换为 sass.js 与sassjs-loader 免除node-sass 安装困难的烦恼
启动:
npm run start 打包：
npm run build遵从平台发布前端规范标准，节选以下要点：
遵从Camel命名
- 常量全部大写，单词间下划线分隔
- 类采用Pascal命名
- css 按照工程结构 嵌套书写，嵌套层级不超过三层——采用 @at-root
- 非页面引用scss文件，加前缀 _ 如：_fun.scss _mixin.scss
mkdir yourFileName
cd yourFileName根据工程目录结构，构建相关文件 ……
npm init
npm install webpack webpack-cli --save-devdevelopment很明显就是我们开发所需要的依赖包，而打包好上线的话是不需要这些包的，一来各种包加起来太大，二来它只是我们开发提高效率的工具而已； 由于本工程只在本地跑，最终还是sftp自动dist 到服务器，所以暂略
修改package.json ,npm run dev 检查打包结果
{
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production"
}
}参考http://www.ruanyifeng.com/blog/2016/10/npm_scripts.html +如果是并行执行（即同时的平行执行），可以使用&符号。 +如果是继发执行（即只有前一个任务成功，才执行下一个任务），可以使用&&符号。 npm run script1.js & npm run script2.js npm run script1.js && npm run script2.js
- test: A condition that must be met 必须满足的条件
- exclude: A condition that must not be met 不能满足的条件
- include: A condition that must be met 必须满足的条件
- loader: A string of “!” separated loaders 用 “！”分割loaders
- loaders: An array of loaders as string loaders的字符串数组
npm install css-loader style-loader html-loader url-loader file-loader --save-dev [
{
test: /\.html$/,
use: 'html-loader'
},
{
test: /\.css$/,
use: [
{
loader: 'style-loader',
options:{
// singleton:true //处理为单个style标签
}
},
{
loader: 'css-loader',
options:{
// minimize:true //压缩css
}
}
]
},
{
test:/\.(png|jpg|jpeg|gif)$/,//图片处理
use:[
{
loader: 'url-loader',
options:{
limit:2048,
name:'[name][hash].[ext]'
}
},
{
loader: 'file-loader',
publicPath:publicPath,
outputPath: 'dist/',
useRelativePath: true
}
]
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,//字体处理
use: ['url-loader']
},
]npm install --save-dev babel-loader @babel/core @babel/preset-env [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/ //设置node_modules里的js文件不用解析
}
]参考：https://segmentfault.com/a/1190000010468759
babel7.0后，需要@ @babel/core vs babel-core babel插件和版本需要对应上，不然掉坑 参考https://www.w3ctech.com/topic/2150 babel-preset-es2015 babel-plugin-transform-runtime babel-plugin-add-module-exports babel-plugin-transform-runtime babel-plugin-transform-class-properties
npm install --save-dev eslint eslint-loader babel-eslint eslint-plugin-react eslint-plugin-vue [
{//eslint 检查
test: /\.(js|jsx)$/,
enforce: 'pre',
loader: ['eslint-loader'],
exclude: /node_modules/ //设置node_modules里的js文件不用解析
},
]增加.eslintrc配置
npm install html-webpack-plugin
new HtmlWebpackPlugin({
filename: './index.html',//输出文件
template: 'src/index.html',//模板文件
inject: 'body',//插入位置
chunks: ['index'],
hash: true,
minify: {
caseSensitive:false,
removeComment:true,//移除注释
collapseWhitespace:false//移除多余空格
}
})参考：http://shirmy.me/2018/05/15/webpack-图片、文件处理/
npm install image-webpack-loader --save-dev [
{
test: /\.(png|jpg|jpeg|gif)$/i,//图片处理
use: [
{
loader: 'url-loader',
options: {
limit: 0,//图片不转base64，增加css的阻塞时间，开启http2，所以也不用雪碧图
name: '[name].[hash:5].[ext]',
}
},
]
},
{//压缩图片
loader: 'image-webpack-loader',
options: {
bypassOnDebug: true,
}
},
]npm install webpack-dev-server open --save-dev参看 webpack.server.js 注释
"start": "node webpack.server.js", npm start 启动项目
npm install --save-dev postcss-loader autoprefixer postcss autoprefixer mini-css-extract-plugin- webpack4已经废弃 extract-text-webpack-plugin 这个插件了，现在使用的是 mini-css-extract-plugin
- 在项目根目录新建postcss.config.js文件，并对postcss进行配置：
module.exports = {
plugins: {
'autoprefixer': {
browsers: [
"> 1%",
"last 5 versions",
"not ie <= 9",
"ios >= 8",
"android >= 4.0"
]
}
}
};不然会报出：Error: No PostCSS Config found
npm install --save-dev optimize-css-assets-webpack-plugin npm install --save-dev node-sass sass-loader
但是node-sass 是个坑货 所以最好换位
$ npm install --save-dev sassjs-loader sass.js
https://www.npmjs.com/package/sass
https://www.npmjs.com/package/sassjs-loader
npm install --save-dev happypack
配置第三方包，比如jquery
npm install imports-loader --save-dev[
{
loader: 'imports-loader',
options: {
// 模块为 value，同样webpack也会解析它，如果没有则从alias中解析它
$: 'jquery'
}
}
]npm install --save-dev webpack-subresource-integrity webpack-assets-manifest两个插件准备写成一个，看来不到春节没有时间
npm install --save-dev webpack-bundle-analyzer配置参看 webpack.analy 参考文章：https://www.cnblogs.com/ssh-007/p/7944491.html
npm install --save-dev webpack-sftp-clientnpm install --save-dev vue vue-router vue-loader vue-template-compiler vue-style-loader [
{
test: /\.vue$/,
use: 'vue-loader'
},
]webpack 相关优化，可参看：https://www.zhoulujun.cn/html/tools/webpack/2016_0218_7492.html