-
安裝: npm init -y npm install webpack --save-dev 命令行: webpack hello.js hello.bundle.js查看全部
-
1-2、webpack安裝和命令
查看全部 -
MD5就可以為任何文件（不管其大小、格式、數量）產生一個同樣獨一無二的“數字指紋”，如果任何人對文件做了任何改動，其MD5值也就是對應的“數字指紋”都會發生變化。
查看全部 -
webpack安裝
1、局部安裝：
npm i -D (npm install --save-dev的簡寫)
安裝指定版本：npm i -D webpack @version
安裝最新版：npm i -D webpack
安裝最新體驗版本：npm i -D webpack @beta
2、全局安裝：
npm i -g webpack
如果 webpack 安裝在全局，那么 CLI 也需要裝在全局，命令為：npm i webpack-cli -g
查看全部 -
在webpack 4.0 之前 ，打包命令為npm demo.js bundle.js,如果安裝的是最新的webpack4.0，需要使用webpack demo.js -o demo.bundle.js 進行打包
查看全部 -
webpack hello.js hello boundle.js css打包需要style.loader!css.loader/insex.css查看全部
-
sass @import 進的sass 文件不需要在css-loader 配置importloader 參數，sass -loader 本身就可以處理@import 進來的sass查看全部
-
參數importLoaders的值是個數值，指的是在css-loader 之后，指定處理@import 進來的css 的loader 的數量查看全部
-
importLoaders查看全部
-
hash是相同的，chunkhash文件名hash值各不相同，并且下次打包只更改修改過的文件的hash
查看全部 -
webpack hello.js --output-filename hello.bundle.js --output-path . --mode development
require("./world.js")
require("style-loader!css-loader!./css.css")
webpack其他參數，如--watch 每次更改內容，自動打包
查看全部 -
使用：
1、在webpack.config.js里配置entry，output。
const path = require('path')
var htmlWebpackPlugin = require('html-webpack-plugin’)//用于生成html文件
module.exports = {
? ? mode: "development",
? ? entry: {//入口
? ? ? ? page1: path.resolve(__dirname, 'src/index.js'),
? ? ? ? page2: path.resolve(__dirname, 'src/a.js'),
? ? },
? ? output: {//出口，即打包到哪個文件夾，打包后叫什么名字
? ? ? ? path: path.resolve(__dirname, 'dist’),//要寫成絕對路徑
? ? ? ? filename: 'js/[name].js’//可通過占位符如[name]\[hash]\[chunkhash]來區別不同的打包文件名
? ? },
? ? plugins: [
? ? ? ? new htmlWebpackPlugin({
? ? ? ? ? ? template:'index.html’,//使用哪個html模版
? ? ? ? ? ? filename:'index.html’,//打包后生成的html文件名
? ? ? ? ? ? title:'hello world' //可向模版傳參，模版通過ejs寫法獲取展示，<%=%>
? ? ? ? })
? ? ],
}
查看全部 -
babel
指定js編譯版本
.babelrc ? {'presets':['lastest']}?
查看全部 -
1.webpack命令
2. js中直接用loader
3.webpack命令中指定loader
4. webpack其他參數，如--watch 每次更改內容，自動打包
查看全部 -
chunks : ['a']? 規定chunks
excludeChunks: ['a', 'b'] 排除掉a,b
查看全部
舉報