-
postcss.config.js
module.exports = { plugins: [ autoprefixer() ] }查看全部 -
package.json
{ "name": "daya", "version": "1.0.0", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "cross-env NODE_ENV=production webpack --config webpack.config.js", "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js" }, "author": "chenyajie", "license": "ISC", "keywords": [ "daya" ], "description": "", "dependencies": { "autoprefixer": "^8.2.0", "babel-core": "^6.26.0", "babel-helper-vue-jsx-merge-props": "^2.0.3", "babel-loader": "^7.1.4", "babel-plugin-syntax-jsx": "^6.18.0", "babel-plugin-transform-vue-jsx": "^3.7.0", "babel-preset-env": "^1.6.1", "cross-env": "^5.1.4", "css-loader": "^0.28.11", "file-loader": "^1.1.11", "html-webpack-plugin": "^3.2.0", "js-loader": "^0.1.1", "postcss-loader": "^2.1.3", "style-loader": "^0.20.3", "stylus": "^0.54.5", "stylus-loader": "^3.0.2", "url-loader": "^1.0.1", "vue": "^2.5.16", "vue-loader": "^14.2.2", "vue-template-compiler": "^2.5.16", "webpack": "^4.5.0", "webpack-dev-server": "^3.1.3" }, "devDependencies": { "webpack-cli": "^2.0.14" } }查看全部 -
webpack.config.js
const path = require("path"); const HTMLPlugin = require('html-webpack-plugin') const webpack = require("webpack") const isDev = process.env.NODE_ENV === "development"; var config = { "target" : "web", "entry": path.join(__dirname, "src/index.js"), "output": { filename: "bundle.js", path: path.join(__dirname, "dist"), }, mode: "development", module: { rules:[ { test: /\.vue$/, loader: "vue-loader" }, { test: /\.(js|jsx)$/, loader: "babel-loader" }, { test: /\.css$/, use:[ "style-loader", "css-loader" ] }, { test: /\.styl$/, use: [ "style-loader", 'css-loader', { loader:"postcss-loader", options:{ sourceMap: true } }, "stylus-loader" ] }, { test: /\.(jpg|png|gif|svg|jpeg)$/, use:[ { loader: "url-loader", options:{ limit: 1024, name:'[name]-aaa.[ext]' } } ] } ] }, plugins:[ new webpack.DefinePlugin({ 'process.env':{ NODE_ENV : isDev? '"development"' : '"production"' } }), new HTMLPlugin() ] } if(isDev){ config.devtool = "#cheap-module-eval-source-map"; config.devServer = { port: 8000, host:"0.0.0.0", overlay:{ errors: true }, // historyFallback: { // 没有映射的 // // }, hot: true // 热加载，只渲染改动过的 // open: true // 启动服务自动打开浏览器 }; // 热加载配置 config.plugins.push( new webpack.HotModuleReplacementPlugin(), new webpack.NoEmitOnErrorsPlugin() ); } module.exports = config查看全部 -
npm i postcss-loader autoprefixer babel-loader babel-core
查看全部 -
package.json
{ "name": "daya", "version": "1.0.0", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "cross-env NODE_ENV=production webpack --config webpack.config.js", "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js" }, "author": "chenyajie", "license": "ISC", "keywords": [ "daya" ], "description": "", "dependencies": { "babel-loader": "^7.1.4", "cross-env": "^5.1.4", "css-loader": "^0.28.11", "file-loader": "^1.1.11", "html-webpack-plugin": "^3.2.0", "js-loader": "^0.1.1", "style-loader": "^0.20.3", "stylus": "^0.54.5", "stylus-loader": "^3.0.2", "url-loader": "^1.0.1", "vue": "^2.5.16", "vue-loader": "^14.2.2", "vue-template-compiler": "^2.5.16", "webpack": "^4.5.0", "webpack-dev-server": "^3.1.3" }, "devDependencies": { "webpack-cli": "^2.0.14" } }查看全部 -
// webpack.config.js const path = require("path"); const HTMLPlugin = require('html-webpack-plugin') const webpack = require("webpack") const isDev = process.env.NODE_ENV === "development"; var config = { "target" : "web", "entry": path.join(__dirname, "src/index.js"), "output": { filename: "bundle.js", path: path.join(__dirname, "dist"), }, mode: "development", module: { rules:[ { test: /\.vue$/, loader: "vue-loader" }, { test: /\.js$/, loader: "babel-loader" }, { test: /\.css$/, use:[ "style-loader", "css-loader" ] }, { test: /\.styl$/, use: [ "style-loader", 'css-loader', "stylus-loader" ] }, { test: /\.(jpg|png|gif|svg|jpeg)$/, use:[ { loader: "url-loader", options:{ limit: 1024, name:'[name]-aaa.[ext]' } } ] } ] }, plugins:[ new webpack.DefinePlugin({ 'process.env':{ NODE_ENV : isDev? '"development"' : '"production"' } }), new HTMLPlugin() ] } if(isDev){ config.devtool = "#cheap-module-eval-source-map"; config.devServer = { port: 8000, host:"0.0.0.0", overlay:{ errors: true }, // historyFallback: { // 没有映射的 // // }, hot: true // 热加载，只渲染改动过的 // open: true // 启动服务自动打开浏览器 }; // 热加载配置 config.plugins.push( new webpack.HotModuleReplacementPlugin(), new webpack.NoEmitOnErrorsPlugin() ); } module.exports = config查看全部 -
webpack打包各种静态资源到一个加载类js里，从而操作这些资源
查看全部 -
将vue文件挂载到加载脚本节点上
查看全部 -
webpack打包前端资源,设置入口和出口，添加加载规则
查看全部 -
创建项目文件夹
查看全部 -
npm init
npm install webpack vue vue-loader --save-dev
npm install css=loader vue-template-compiler --save-dev
查看全部 -
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor'
}),
//vendor一定要放在runtime前面，否则会失去对应的作用
new webpack.optimize.CommonsChunkPlugin({
name: 'runtime'
})
//作用：把webpack相关的代码单独打包到一个文件，好处：在新的模块加入时，文本webpack给每一个新的模块一个新的id。有新模块加入的时候，插入的顺序可能是在中间，会导致后面的模块的id就会发生变化，从而导致打包出来的内容的hash发生变化，那么hash想要使用浏览器常缓存的作用就失去了效果。使用这个配置方法就可以规避这个问题。
查看全部 -
hash chunkhash 的区别
chunkhash 可理解为 在entry中声明的不同节点，我们使用异步加载时，每一个异步加载的模块也是一个chunk
使用hash时，所有打包出来的每一个js模块都是同样一个hash，是整个应用的hash。
使用chunkhash的话，每一个chunk单独生成一个hash。
所以一旦使用了不同的entry，或者将类库文件单独打包时，必须要使用chunkhash，否则单独打包就没有任何意义，因为每次业务代码更新，他的render的hash也会变。
查看全部 -
注意：尽量把所有的数据操作放到顶层里面。数据在哪个地方声明，就在哪里操作，不要在下层组件操作上层组件声明的数据，否则容易导致很多错误
查看全部 -
npm i css-loader vue-template-compiler
查看全部
举报
0/150
提交
取消