本篇文章為大家帶來了關於javascript的相關知識,其中主要介紹了webpack打包流程的相關問題,webpack是一個用於現代JavaScript應用程式的靜態模組打包工具,下面一起來看一下,希望對大家有幫助。
【相關推薦:javascript影片教學、web前端】
##webpack :是一個用於現代JavaScript 應用程式的 靜態模組打包工具。當webpack 處理應用程式時,它會在內部從一個或多個入口點建立一個 依賴圖(dependency graph),然後將你專案中所需的每一個模組組合成一個或多個 bundles,它們都是靜態資源,用來展示你的內容。
WebPack可以看做是模組打包機:它做的事情是,分析你的專案結構,找到JavaScript模組以及其它的一些瀏覽器不能直接運行的拓展語言(Sass,TypeScript等),並將其轉換和打包為合適的格式供瀏覽器使用。在3.0出現後,Webpack還肩負起了優化專案的責任。 這段話有三個重點:#1、建立一個新項目,然後執行
npm init
2 、全域安裝webpack以及webpack-cil
npm install -g webpack npm install -g webpack-cil
3、將webpack安裝到專案依賴,這樣就可以使用本機版的webpack
npm install webpack -save-dev npm install webpack-cil -save-dev
4、建立最外層的webpack.config.js,改變預設值
作用:是為了方便不用每次打包的時候都輸入目錄位址,而是直接webpack即可const path = require('path'); const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CopyPlugin = require('copy-webpack-plugin'); module.exports = { mode: 'development', entry: './src/index.js', // 指定打包入口文件 output: { filename: 'index.js', // 指定打包输出文件名 path: path.resolve(__dirname, './public'), // 指定打包输出路径 }, module: { // 对模块的处理逻辑 rules: [ // 一系列的加载器的处理逻辑 { test: /\.css$/, // 正则 匹配到文件后缀 use: [ 'style-loader', 'css-loader', ], // 用此加载器处理匹配到的文件 exclude: [ // 排除此文件夹下的文件 path.resolve(__dirname, './node_modules') ] } ], }, resolve: { extensions: ['.js', '.json', '.jsx', '.css'] // 自动补全识别后缀 }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html', minify: { removeAttributeQuotes: true, }, hash: true, }), new webpack.EnvironmentPlugin( { NODE_ENV: 'development', TEST: 'true', } ), new CopyPlugin({ patterns: [ {from: path.resolve(__dirname, './src/index.css'), to: path.resolve(__dirname, './public')}, ], }), ], // 配置webpack服务 devServer: { port: 8000, // 启动服务监听端口 host: 'localhost', // 可以通过localhost访问 open: true, // 自动打开浏览器 hot: true, // 启动热更新 }, };
5 、安裝HtmlWebpackPlugin
#這個外掛程式將為你產生一個HTML5 文件, 在body 中使用script 標籤引入你所有webpack 產生的bundle。只要加入該插件到你的webpack 設定中
npm install --save-dev html-webpack-plugin
6、安裝CopyWebpackPlugin
該外掛程式是將需要的檔案打包copy到你所需要的地方,我之所以安裝此插件,是因為我打完包之後,css並沒有打包成功,之後嘗試了很多方式還是沒有成功,只能手動執行這個將css包copy過去npm install copy-webpack-plugin --save-dev // 安装
const CopyPlugin = require("copy-webpack-plugin"); module.exports = { plugins: [ new CopyPlugin({ patterns: [ { from: "source", to: "dest" }, { from: "other", to: "public" }, ], }), ], }; // webpack.config.js
7、兩種打包方法
webpack --mode development // 开发模式 不压缩 webpack --mode production // 生产模式 压缩
8、安裝webpack-dev-server
npm install --save-dev webpack webpack-dev-server const Webpack = require('webpack'); const WebpackDevServer = require('webpack-dev-server');
9、進行打包之後,啟動專案:
"scripts": { "test": "mocha", "start": "webpack-dev-server", "dev": "webpack --mode development" },// 在package.json 里面进行配置 // 然后执行 npm run start // 项目启动&热更新 npm run dev // 再次打包 npm run test // 执行测试
以上是簡單了解webpack打包流程的詳細內容。更多資訊請關注PHP中文網其他相關文章!