作者：心叶时间：2019年01月30日 10:37前要由于webpack的配置具有实时性，之前搭建的vue2项目是基于webpack2，因此，特地在此维护一篇关于webpack4搭建vue2项目的说明，会及时更新（github地址：https://github.com/yelloxing/…）。基础配置npm install –save-dev vue vue-router由于是搭建vue2项目，首先需要安装用到的vue和vue路由。npm install –save-dev webpack webpack-cli接着，安装webpack，建立好空的webpack.config.js，如下：module.exports = { entry: [’./src/entry.js’], output: { path: __dirname, filename: ‘build/main.js’ }, resolve: { alias: { ‘vue’: ‘vue/dist/vue.js’ } }, module: { rules: [] }};上面的配置和webpack2的没有区别，这里不再赘述了（entry：打包入口，output：打包文件存放地址，resolve的配置是因为vue2在开发和生成模式对象不统一）。解析vue2npm install –save-dev vue-template-compiler vue-loader首先安装vue模板解析器，接着，在webpack.config.js中配置一下：…rules: [{ test: /.vue$/, use: [‘vue-loader’]}]…配置的时候，其实就是加上上面这二句代码。到此为止，最简单的项目就搭建好了。为了方便执行，在package.json中添加下面脚本：“scripts”: { “release”: “node_modules/.bin/webpack”}然后在命令行执行：npm run release搭建开发环境上面的打包方式时候开发完毕以后，发布代码，如果是开发中，我们希望实时刷新。首先安装服务器：npm install –save-dev webpack-dev-server接着在webpack中配置:…devServer: { contentBase: ‘./’, compress: true, host: ’localhost’, port: ‘20000’, hot: true, inline: true, historyApiFallback: true},plugins: [ new webpack.HotModuleReplacementPlugin()],module:…然后，在package.json中添加下面脚本：“scripts”: { “dev”:“node_modules/.bin/webpack-dev-server –open”, “release”: “node_modules/.bin/webpack”}执行下面命令：npm run dev浏览器会自动打开：localhost:20000完善vue配置npm install –save-dev vue-style-loader css-loader上面是添加项目中对css的解析器，再在webpack.config.js中添加如下配置，即可开发css代码：{ test: /.css$/, use: [‘vue-style-loader’, ‘css-loader’]}添加对scss的支持npm install –save-dev sass-loader node-sass然后，添加下面配置： { test: /.scss$/, use: [“vue-style-loader”, “css-loader”, “sass-loader”]}添加对图片的支持npm install –save-dev file-loader然后，添加下面配置：{ test: /.(png|jpg|jpeg|gif|bmp)$/, use: [‘file-loader?limit=7000&name=build/image/[name].[ext]’]}如果你使用的图片格式不被上面的test包含，需要手动额外添加即可。后记完整的代码维护在github中，会及时更新：https://github.com/yelloxing/…希望对你学习vue2有所帮助 :)