目的用webpack构建简单前端项目
1.npm init (npm init -y) 形成package.json
2.npm install --save-dev webpack 形成 node_modules
3.项目路径dist--index.html src---index.js----test.less webpack.config.js
4.webpack.config.js配置
const path = require('path'); module.exports = { entry:'./src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname,'dist') //解析到哪个目录 }, module: { rules: [ { test:/\.less$/, use:[ { loader:"style-loader" }, { loader:"css-loader" }, { loader:"less-loader" } ] } ] }, devServer: { contentBase:'./dist', watchContentBase:true } }
5.运行webpack过程中提示安装webpack-cli 安装后package.json
{ "name": "webpack-config", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack-dev-server --mode development", "build": "webpack --mode production" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "css-loader": "^0.28.11", "less": "^3.0.4", "less-loader": "^4.1.0", "node-less": "^1.0.0", "style-loader": "^0.21.0", "webpack": "^4.8.3", "webpack-cli": "^2.1.3", "webpack-dev-server": "^3.1.4" }, "dependencies": {} }
webpack4.0以上版本支持mode 配置以上scripts里面指定运行环境
6.自动刷新 用到webpack-dev-server,进行相关配置
7.安装 vue依赖相关 babel和vue系列
{ "name": "webpack-config", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack-dev-server --mode development", "build": "webpack --mode production" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "babel-core": "^6.26.3", "babel-loader": "^7.1.4", "babel-plugin-transform-runtime": "^6.23.0", "babel-preset-es2015": "^6.24.1", "babel-preset-stage-0": "^6.24.1", "babel-runtime": "^6.26.0", "css-loader": "^0.28.11", "extract-text-webpack-plugin": "^4.0.0-beta.0", "file-loader": "^1.1.11", "html-webpack-plugin": "^3.2.0", "less": "^3.0.4", "less-loader": "^4.1.0", "node-less": "^1.0.0", "optimize-css-assets-webpack-plugin": "^4.0.1", "style-loader": "^0.21.0", "vue": "^2.5.16", "vue-hot-reload-api": "^2.3.0", "vue-html-loader": "^1.2.4", "vue-loader": "^14.0.3", "vue-style-loader": "^4.1.0", "vue-template-compiler": "^2.5.16", "webpack": "^4.8.3", "webpack-cli": "^2.1.3", "webpack-dev-server": "^3.1.4" }, "dependencies": {} }
8.生成html文件 用到插件html-webpack-plugin 进行相关配置
9.想要css分离和压缩 用到插件extract-text-webpack-plugin optimize-css-assets-webpack-plugin 进行相关配置 中途执行的时候有报错 根据报错提示一步步解决 搜索解决方案都能解决
10最后贴上webpack配置代码
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); //生成html文件 并引入css js
const ExtractTextPlugin = require("extract-text-webpack-plugin"); //将css文件分开打包的插件
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin'); //压缩css文件
module.exports = {
entry:'./src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname,'dist') //解析到哪个目录
},
resolve:{
extensions: ['.js', '.vue', '.json'], //可以省略这些文件的扩展名
alias:{
'vue$':'vue/dist/vue.esm.js' //vue默认读取运行时文件 运行时编译，通过配置读取全文件，包括编译器和运行时编译
}
},
module: {
rules: [
{
test:/\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
less: ExtractTextPlugin.extract({ fallback: 'vue-style-loader', use: 'css-loader!less-loader' }),
css: ExtractTextPlugin.extract({ fallback: 'vue-style-loader', use: 'css-loader' })
}
}
},
{
test:/\.js$/,
use:[
{
loader: 'babel-loader'
}
]
},
{
test:/\.less$/,
use: ExtractTextPlugin.extract({//use:指需要什么样的loader去编译文件,这里由于源文件是.css所以选择css-loader
fallback: "style-loader",//fallback:编译后用什么loader来提取css文件
use: "less-loader!css-loader"//publicfile:用来覆盖项目路径,生成该css文件的文件路径
})
// use:[
// {
// loader:"style-loader"
// },
// {
// loader:"css-loader"
// },
// {
// loader:"less-loader"
// }
// ]
}
]
},
devServer: {
contentBase:'./dist',
watchContentBase:true
},
plugins: [
new HtmlWebpackPlugin({
template:'./index.html',
title:'index',
// filename:'index.html',
inject:true,
// chunks:['main']
hash:true //增加hash值 防止缓存
}),
new ExtractTextPlugin('css/index.css'), //指定css打包路径
new OptimizeCSSPlugin({ //压缩css
cssProcessorOptions: {
safe: true
}
})
]
}
代码量不大 但是自己从中学到了挺多东西，记录下来 后面dist文件都是build出来的
参考https://zhuanlan.zhihu.com/p/27663434 [译]使用Webpack提高Vue.js应用程序的4种方式
https://www.cnblogs.com/wonyun/p/6030090.html html-webpack-plugin详解