一.构筑邻近地区服务项目器
邻近地区服务项目能提升合作开发工作效率. webpack不须要每天都装箱,就能看见修正后的效用.邻近地区服务项目器如前所述node.js构筑,外部采用三十express架构.能同时实现让应用程序手动创下的机能.
1.加装邻近地区服务项目组件
npm install –save-dev webpack-dev-
–save-dev:邻近地区服务项目多于在合作开发自然环境的这时候才会采用,因此,他们以dev商业模式加装,装箱的这时候不能被装箱webpack-dev-:那个版是Vue2相关联的版.加装的这时候可能会报极度
那个难题原因在于我是mac本,没加装Xcode,他们继续执行上面的指示加装呵呵xcode的应用程序就能了
继续执行上面的指示,输出公钥sudo rm -rf $(xcode-select -print-path)
加装Xcode应用程序sudo xcode-select –install
接着在继续执行npm install –save-dev webpack-dev-就获得成功了.
2.实用性webpack.config.js
devServer:{ contentBase:”./dist”, inline: true}
contentBase:为哪两个实用性文件提供更多邻近地区服务项目,预设是根实用性文件port:freenodeinline:网页动态创下historyApiFallback:在SPA网页中,倚赖HTML5的history商业模式3.实用性package.json
“scripts”:{ “test”:”echo \”Error: no test specified\”&& exit 1″,”build”:”webpack”,”dev”:”webpack-dev-server”},
这句话的含义是,将邻近地区服务项目交由webpack来管理.
4.启动邻近地区服务项目
npm run dev
启动获得成功!
他们还能启动服务项目后直接打开应用程序
能在指示行后面加两个–open
“dev”:”webpack-dev-server –open”
二.服务项目实用性文件抽离
为了能够更好的管理实用性文件,他们将实用性文件进行分离.
抽离的原则是:合作开发自然环境的实用性放在两个文件,须要装箱到线上的实用性放在两个文件,这样管理起来更清晰,更方便.
第一步:创建两个目录build,接着在里面创建三个文件
1. base.config.js
2. dev.config.js
3. prod.config.js
第二步:把webpack.config.js中的内容
公共的部分拷贝到base.config.js中.合作开发自然环境的实用性拷贝到dev.config.js中须要构建的部分拷贝到prod.config.js中base.config.js
const path = require(“path”)const webpack = require(“webpack”)const HtmlWebpackPlugin = require(“html-webpack-plugin”)const UglifyJsWebpackPlugin = require(“uglifyjs-webpack-plugin”)module.exports={//入口 entry:”./src/main.js”, output:{ path: path.resolve(dirname,dist), filename:”bundle.js”,//publicPath:”dist/”}, module:{ rules:[ { test:/\.css$/, use:[style-loader,css-loader] },{ test:/\.less$/, use:[{ loader:”style-loader”// creates style nodes from JS strings },{ loader:”css-loader”// translates CSS into CommonJS },{ loader:”less-loader”// compiles Less to CSS }]},{ test:/\.(pngjpggifjpeg)$/, use:[ { loader:url-loader, options:{ //当加载的图片,小于limit时,会将图片编译成base64字符串形式.—不须要文件,因为他是两个base64字符串//当加载的图片,大于limit是,须要采用file-loader组件来加载.—当文件来处理,就须要装箱成文件,须要file-loader //这是加载的文件目录是根目录,结果找不到文件,因此也不显示,他们能在output位置增加publicPath:”dist/”这样,所有的路径类的都会加上那个路径 limit:13000,} }]},{ test:/\.vue$/, use:[vue-loader]} ]}, resolve:{ alias:{ vue$:vue/dist/vue.esm.js} }, plugins:[ //增加版权信息new webpack.BannerPlugin(@author lxl @data 2021-03-03@desc *****),//装箱index.html到dist中new HtmlWebpackPlugin({ template:”index.html”}),]}
dev.config.js
module.exports={ devServer:{ contentBase:”./dist”, inline: true }}
prod.config.js
module.exports={ plugins:[ //压缩js文件–合作开发阶段,不要压缩new UglifyJsWebpackPlugin()]}
第三步:组合实用性文件
现在原来的两个webpack.config.js实用性文件变成了三个实用性文件.
合作开发自然环境采用: base.config.js 和 dev.config.js
线上自然环境采用: base.config.js 和 prod.config.js
那么,导入配的这时候,如何将其合并呢?
他们须要加装两个应用程序webpack-merge.那个应用程序能帮助他们将两个实用性文件进行合并
npm install webpack-
接着在dev.config.js和prod.config.js中引入base.config.js.来看看引入后的文件
dev.config.js
const webpackMerge = require(“webpack-merge”) const baseconfig = require(“./base.config”)module.exports =webpackMerge(baseconfig,{ devServer:{ contentBase:”./dist”, inline: true }})
prod.config.js
const UglifyJsWebpackPlugin = require(“uglifyjs-webpack-plugin”)const webpackMerge = require(“webpack-merge”) const baseConfig = require(“./base.config”)module.exports = webpackMerge(baseConfig,{ plugins:[ //压缩js文件–合作开发阶段,不要压缩new UglifyJsWebpackPlugin()]})
在这里引入了webpackMerge的包,接着采用webpackMerge(实用性文件1,实用性文件2),将两个实用性文件合并
第三步:接着修正输出文件的路径
因为他们的实用性文件目录修正了,因此须要重新设置装箱的输出路径
修正base.config.js
module.exports={//入口 entry:”./src/main.js”, output:{ path: path.resolve(dirname,dist), filename:”bundle.js”,//publicPath:”dist/”},….}
第四步:在package.json中指定实用性文件
预设读取的配置文件是webpack.config.js,现在他们定义了自己的实用性文件,因此,须要指定读取实用性文件
修正package.json
{“name”:”meet”,”version”:”1.0.0″,”description”:””,”main”:”webpack.config.js”,”scripts”:{ “test”:”echo \”Error: no test specified\”&& exit 1″,”build”:”webpack –config ./build/prod.config.js”,”dev”:”webpack-dev-server –open –config ./build/dev.config.js”},”author”:””,”license”:”ISC”,”devDependencies”:{ “css-loader”:”^2.1.1″,”file-loader”:”^2.0.0″,”html-webpack-plugin”:”^3.2.0″,”less”:”^3.9.0″,”less-loader”:”^4.1.0″,”style-loader”:”^2.0.0″,”uglifyjs-webpack-plugin”:”^1.1.1″,”url-loader”:”^2.3.0″,”vue-loader”:”^13.0.0″,”vue-template-compiler”:”^2.6.12″,”webpack”:”^3.6.0″,”webpack-dev-server”:”^2.9.1″},”dependencies”:{ “vue”:”^2.6.12″}}
通过–config指定读取的实用性文件
“build”:”webpack –config ./build/prod.config.js”,”dev”:”webpack-dev-server –open –config ./build/dev.config.js”
第五步:删除webpack.config.js
第六步:构建项目并运行
npm run build
接着运行项目
npm run dev
文章转载自：https://www.cnblogs.com/ITPower/p/14478529.html
