webpack相关配置
var path = require("path"); var webpack = require("webpack"); //启用热更新第二步 // 导入在内存中生成 html 的插件,只要是插件就一定要放在plugins中去 var htmlWebpackPlugin = require("html-webpack-plugin"); //通过node中的模块操作,向外暴露一个配置对象 module.exports = { //entry: 表示要使用webpack打包的文件 entry: path.join(__dirname,"./src/main.js"), output: { //输出文件相关的配置 path: path.join(__dirname,"./dist"), //指定打包好的文件,输出到那个文件中去 filename: "bundle.js" //指定输出文件的名称 }, devServer: { //这是配置dev命令参数的第二种方式,相对来说这种方式麻烦一些 //--open --port 3000 --contentBase src --hot open: true, //自动打开浏览器 port: 3000, //设置启动的运行端口 contentBase: "src", //指定托管的根目录 hot: true //启用热更新第一步 }, plugins: [ //配置插件的节点 new webpack.HotModuleReplacementPlugin(), //new 一个热更新的模块对象,启用热更新第三步 new htmlWebpackPlugin({ template: path.join(__dirname,"./src/index.html"), //指定模板页面,将来会根据指定的页面路径去生成内存中的页面 filename: "index.html" //指定生成页面的名称 }) ], resolve: { alias: { //修改vue被导入时候的包的路径 "vue$": "vue/dist/vue.js" } }, module: { //用于配置所有的 第三方模块 加载器 rules: [ //匹配规则 {test: /\.css$/, use: ["style-loader","css-loader"]}, //配置处理.css文件第三方loader规则 {test: /\.less$/, use: ["style-loader","css-loader","less-loader"]}, //配置处理.less文件第三方loader规则 {test: /\.scss$/, use: ["style-loader","css-loader","sass-loader"]}, //配置处理.scss文件第三方loader规则 {test: /\.(jpg|png|gif|bmp|jpeg)$/, use: "url-loader"}, //配置处理图片路径第三方loader规则 //{test: /\.(jpg|png|gif|bmp|jpeg)$/, use: "url-loader?limit=2473&name=[hash:8]-[name].[ext]"}, //配置处理图片路径第三方loader规则 //limit的值是图片的大小,单位是dyte,但我们引用的图片大于或者等于给定的limit时,则不会被转为base64格式的字符串, //如果小于limit,则会被转为base64格式的字符串 {test: /\.(ttf|eot|svg|woff|woff2)$/, use: "url-loader"}, //配置字体文件第三方loader规则 {test: /\.js$/, use: "babel-loader", exclude: /node_modules/},//配置babel来转换高级的ES语法 {test: /\.vue$/, use: "vue-loader"} //处理.vue文件的loader ] } }
相关推荐
-
验证码倒计时js javascript
2019-1-8
-
node.js封装Post请求,支持接口中上传文件,即模拟multipart/form-data请求接口 javascript
2019-1-8
-
序列化form表单 javascript
2019-1-7
-
判断浏览器环境(QQ,微信,安卓设备,IOS设备,PC微信环境,移动设备) javascript
2019-1-8
-
移动端、pc端通用点击复制 javascript
2019-1-7
-
网页定时刷新 javascript
2019-1-8
-
购物车Demo javascript
2019-1-8
-
js 模拟php ksort排序 javascript
2019-1-8
-
js创建svg元素的方法 javascript
2019-1-7
-
js判断设备,跳转app应用、android市场或者AppStore javascript
2019-1-8