gulp、webapck 基于nodejs的webpack 模块化，组件化开发的利器vue 集成了webpack
1、安装命令 cnpm i webpack webpack-cli -D 安装webpack-4版本cnpm i webpack-dev-server@2 -g // 安装服务器，cnpm run dev cnpm i webpack@3 -S cnpm i webpack-dev-server@2 -S cnpm i html-webpack-plugin -S // 会自动将页面中引入需要的js文件 cnpm i babel-core babel-loader@7 -S // 解析一些特殊文件，比如es6 cnpm i babel-preset-env -S // 安装包含了es6/es7/es8的一些语法规则----预设 cnpm i style-loader css-loader -S cnpm i node-sass sass-loader -S cnpm i url-loader file-loader -S // 处理形如css中写的一些背景图片等2、项目目录下创建一个文件.babelrc在Babel执行编译的过程中，会从项目的根目录下的 .babelrc文件中读取配置。.babelrc是一个json格式的文件。在.babelrc配置文件中，主要是对预设(presets) 和 插件(plugins) 进行配置。.babelrc配置文件一般为如下{ "presets": [ ["env", { // 含有最新的js版本 "modules": false, // 不依赖模块 "targets": { // 运行在浏览器端的配置，支持每个浏览器端最后的两个版本，不能小于ie8 "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] } }] ], "plugins": []}2、添加webpack配置文件webpack.config.js const webpack = require('webpack'); const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = { //基础目录，绝对路径，用于从配置中解析入口起点(entry point)和加载器(loader) context: path.resolve(__dirname, './'), // entry: '', // 起点或是应用程序的起点入口。从这个起点开始，应用程序启动执行。如果传递一个数组，那么数组的每一项都会执行。 entry: { app: './src/index.js', vendor: './src/test.js' }, //output 选项控制 webpack 如何向硬盘写入编译文件。注意，即使可以存在多个入口起点，但只指定一个输出配置。 output: { path: path.resolve(__dirname, './dist'), filename: '[name].js' // 如果你是对象入口，那么此时的name就是对象入口中的key } }3、创建src/index.js、src/test.js,分别写入一些js语句，然后控制台执行webpack指令，会发现在目录下自动生成了dist目录，目录下出现了app.js和vendor.js4、根目录下创建index.html，希望可以将其出现在dist/index.html，并且自动引入js5、修改配置文件 module.exports = { ..., plugins: [ new HtmlWebpackPlugin({ // 会将原来的index.html文件在dist文件处生成并且引入关联的文件 template: './index.html' }) ] ... }6、如果代码中使用了js的高级语法，需要使用babel解析器进行解析，修改配置文件 module.exports = { ..., module: { rules: [ { test: /\.js$/, // 以js结尾的语句 loader: 'babel-loader' // 以js结尾的语句，需要使用babel解析器进行解析 } ] }, ... }7、src文件内部引入sass--lib可以在入口文件处通过import './main.scss' 引入新创建的main.scss文件,运行时发现如下出现异常You may need an appropriate loader to handle this file type.意思是你的配置文件缺少相应sass的配置
转载于:https://www.cnblogs.com/kaijiangyugty/p/11086798.html
相关资源：webpack-merge, 为 web pack设计的合并( MIT ).zip