前言 此內容是個人學習筆記,以便日後翻閱。 非教程,如有錯誤還請指出 Webpack 打包文件 支持JS模塊化 模式: production(0配置預設), development(生產環境) 更詳細的請前往 webpack官網 安裝 npm i webpack webpack cli D 執行 w ...
前言
此內容是個人學習筆記,以便日後翻閱。非教程,如有錯誤還請指出
Webpack
- 打包文件
- 支持JS模塊化
- 模式: production(0配置預設), development(生產環境)
更詳細的請前往 webpack官網
安裝
- npm i webpack webpack-cli -D
執行 webpack
- npx webpack
- 註意: 在有package.json的目錄下執行命令, 當前目錄一定要有src文件夾
手動配置webpack
module.exports = {
mode: 'development', // 生產環境
entry: './src/index.js', // 入口文件
output: {
filename: ' bundle.js',
path: path.resolve(__dirname, 'dist'), // 目標輸出路徑, path的絕對路徑
}
}mode: 告訴 webpack 使用響應模式的內置優化
- 使用development
module.exports = {
+ mode: 'development'
- plugins: [
- new webpack.NamedModulesPlugin(),
- new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("development") }),
- ]
}webpack在生產環境下預設使用的插件。
- production
module.exports = {
+ mode: 'production',
- plugins: [
- new UglifyJsPlugin(/* ... */),
- new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") }),
- new webpack.optimize.ModuleConcatenationPlugin(),
- new webpack.NoEmitOnErrorsPlugin()
- ]
}在生產環境下會對代碼進行代碼壓縮等優化, 預設使用這些插件
## package.json中配置 webpack 快捷腳本
javascript "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack --config webpack.config.js" },
在腳本 scripts對象中新增了 build命令, 指定webpack --config, 通過--config選項來指定配置文件。
當執行 npm run build時, 會自動啟用 webpack,並且找到 webpack.config.js配置文件並執行。
## plugins插件
- webpack-dev-server
為webpack應用程式提供開發伺服器,它只適用於開發。在scripts中可以配置"dev": "webpack-dev-server""
運行使用 npm run dev
