webpack工具学习 构建简单vue项目(不依赖vue-cli) webpack4.0
目的用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详解
人是在一天天内提高的,只有不断努力才不会被淘汰!