使用webpack構建一個項目

本文轉載自查看原文 2018-05-24 02:02 2186 webpack

1.使用 CommonJS 進行對 src/js 目錄下的 js 代碼進行模塊化，所有模塊都不產生全局變量，只通過 require 聲明依賴，以及通過 module.exports 暴露模塊接口。

 1 // 依賴 global
 2 var global = require('./global');  // 頭部聲明依賴
 3 
 4 // 中間代碼不用修改
 5 var Dust = function(){
 6 }
 7 Dust.prototype.init = function(){
 8 }
 9 Dust.prototype.drawDust = function(){
10 }
11 
12 module.exports = Dust;   // 最后暴露 Dust 類

2.根目錄增加 webpack.config.js 配置文件，使用 Webpack 對 js 進行打包, 入口文件為 src/js/index.js, 打包輸出到 dist/bundle.js。

命令行進入項目目錄，安裝本地安裝webpack, webpack-cli

npm install webpack --save-dev

npm install webpack-cli --save-dev

1 var path = require('path');
2 module.exports = {
3     entry: './src/js/index.js',        //入口文件
4     output: {
5         filename: 'bundle.js',        //輸出文件名
6         path: path.resolve(__dirname, './dist')        //輸出目錄
7     }
8 }

webpack.config.js

3.使用 css-loader 和 style-loader, 將 src/css/style.css 也加入打包。

安裝css-loader和style-loader

npm i css-loader style-loader --save-dev

使用 extract-text-webpack-plugin 將 CSS 文件分離出來，構建后目錄單獨有一個 style.css 文件。

安裝extract-text-webpack-plugin@next

npm i extract-text-webpack-plugin@next --save-dev

1 // 主入口
2 require('../css/style.css');

index.js

 1 var path = require('path');
 2 const webpack =require("webpack");
 3 const ExtractTextPlugin = require("extract-text-webpack-plugin");
 4 
 5 module.exports = {
 6     entry: './src/js/index.js',        //入口文件
 7     output: {
 8         filename: 'bundle.js',        //輸出文件名
 9         path: path.resolve(__dirname, './dist')        //輸出目錄
10     },
11     module: {
12         rules: [
13           {
14             test: /\.css$/,
15             use: ExtractTextPlugin.extract({
16               fallback: "style-loader",
17               use: "css-loader"
18             })
19           }
20         ]
21     },
22     plugins: [
23         new ExtractTextPlugin("styles.css")
24     ]
25 }

webpack.config.js

注：由於webpack版本是4.8.3，所以安裝的是extract-text-webpack-plugin@next

4.使用 html-webpack-plugin 將 src/index.html 作為模板，刪掉index.html 里面所有的 script 和 link 標簽，最終在 dist/ 目錄自動生成引用打包后文件的 index.html 。

安裝html-webpack-plugin

npm i html-webpack-plugin --save-dev

 1 var path = require('path');
 2 const webpack =require("webpack");
 3 const ExtractTextPlugin = require("extract-text-webpack-plugin");
 4 const HtmlWebpackPlugin = require('html-webpack-plugin');
 5 
 6 module.exports = {
 7     entry: './src/js/index.js',        //入口文件
 8     output: {
 9         filename: 'bundle.js',        //輸出文件名
10         path: path.resolve(__dirname, './dist')        //輸出目錄
11     },
12     module: {
13         rules: [
14           {
15             test: /\.css$/,
16             use: ExtractTextPlugin.extract({
17               fallback: "style-loader",
18               use: "css-loader"
19             })
20           }
21         ]
22     },
23     plugins: [
24         new ExtractTextPlugin("styles.css"),
25         new HtmlWebpackPlugin({
26             template: 'src/index.html',
27             filename: 'index.html'
28         })
29     ]
30 }

webpack.config.js

5.使用 copy-webpack-plugin 將 src/images 下的所有圖片復制到 dist/images 目錄。

安裝copy-webpack-plugin

npm i copy-webpack-plugin --save-dev

 1 var path = require('path');
 2 const webpack =require("webpack");
 3 const ExtractTextPlugin = require("extract-text-webpack-plugin");
 4 const HtmlWebpackPlugin = require('html-webpack-plugin');
 5 const CopyWebpackPlugin = require('copy-webpack-plugin');
 6 
 7 module.exports = {
 8     entry: './src/js/index.js',        //入口文件
 9     output: {
10         filename: 'bundle.js',        //輸出文件名
11         path: path.resolve(__dirname, './dist')        //輸出目錄
12     },
13     module: {
14         rules: [
15           {
16             test: /\.css$/,
17             use: ExtractTextPlugin.extract({
18               fallback: "style-loader",
19               use: "css-loader"
20             })
21           }
22         ]
23     },
24     plugins: [
25         new ExtractTextPlugin("styles.css"),
26         new HtmlWebpackPlugin({
27             template: 'src/index.html',
28             filename: 'index.html'
29         }),
30         new CopyWebpackPlugin([{
31             from: 'src/images',
32             to: 'images'
33         }])
34     ]
35 }

webpack.config.js

6.使用 clean-webpack-plugin，每次構建之前刪掉 dist 目錄，避免上一次構建的影響。

安裝clean-webpack-plugin

npm i clean-webpack-plugin --save-dev

 1 var path = require('path');
 2 const webpack =require("webpack");
 3 const ExtractTextPlugin = require("extract-text-webpack-plugin");
 4 const HtmlWebpackPlugin = require('html-webpack-plugin');
 5 const CopyWebpackPlugin = require('copy-webpack-plugin');
 6 const CleanWebpackPlugin = require('clean-webpack-plugin')
 7 
 8 module.exports = {
 9     entry: './src/js/index.js',        //入口文件
10     output: {
11         filename: 'bundle.js',        //輸出文件名
12         path: path.resolve(__dirname, './dist')        //輸出目錄
13     },
14     module: {
15         rules: [
16           {
17             test: /\.css$/,
18             use: ExtractTextPlugin.extract({
19               fallback: "style-loader",
20               use: "css-loader"
21             })
22           }
23         ]
24     },
25     plugins: [
26         new ExtractTextPlugin("styles.css"),
27         new HtmlWebpackPlugin({
28             template: 'src/index.html',
29             filename: 'index.html'
30         }),
31         new CopyWebpackPlugin([{
32             from: 'src/images',
33             to: 'images'
34         }]),
35         new CleanWebpackPlugin('dist')
36     ]
37 }

webpack.config.js

7.使用 webpack-dev-server 可以開啟本地服務器，保存代碼后頁面自動刷新。

安裝webpack-dev-server

npm i webpack-dev-server --save-dev

使用 npm scripts 運行構建任務

 1 {
 2   "name": "project",
 3   "version": "1.0.0",
 4   "description": "",
 5   "main": "index.js",
 6   "dependencies": {},
 7   "devDependencies": {
 8     "clean-webpack-plugin": "^0.1.19",
 9     "copy-webpack-plugin": "^4.5.1",
10     "css-loader": "^0.28.11",
11     "extract-text-webpack-plugin": "^4.0.0-beta.0",
12     "html-webpack-plugin": "^3.2.0",
13     "style-loader": "^0.21.0",
14     "webpack": "^4.8.3",
15     "webpack-cli": "^2.1.4",
16     "webpack-dev-server": "^3.1.4"
17   },
18   "scripts": {
19     "test": "echo \"Error: no test specified\" && exit 1",
20     "watch": "webpack --watch",
21     "build": "webpack",
22     "start": "webpack-dev-server --open"
23   },
24   "keywords": [],
25   "author": "",
26   "license": "ISC"
27 }

package.json

 1 var path = require('path');
 2 const webpack =require("webpack");
 3 const ExtractTextPlugin = require("extract-text-webpack-plugin");
 4 const HtmlWebpackPlugin = require('html-webpack-plugin');
 5 const CopyWebpackPlugin = require('copy-webpack-plugin');
 6 const CleanWebpackPlugin = require('clean-webpack-plugin')
 7 
 8 module.exports = {
 9     entry: './src/js/index.js',        //入口文件
10     output: {
11         filename: 'bundle.js',        //輸出文件名
12         path: path.resolve(__dirname, './dist')        //輸出目錄
13     },
14     module: {
15         rules: [
16           {
17             test: /\.css$/,
18             use: ExtractTextPlugin.extract({
19               fallback: "style-loader",
20               use: "css-loader"
21             })
22           }
23         ]
24     },
25     plugins: [
26         new ExtractTextPlugin("styles.css"),
27         new HtmlWebpackPlugin({
28             template: 'src/index.html',
29             filename: 'index.html'
30         }),
31         new CopyWebpackPlugin([{
32             from: 'src/images',
33             to: 'images'
34         }]),
35         new CleanWebpackPlugin('dist')
36     ],
37     devServer: {
38      contentBase: './dist'
39    }
40 }

webpack.config.js

npm run build 運行 webpack 命令

npm run start 可以開啟本地服務器

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 [petite-vue學習]--如何使用petite-vue+webpack構建一個多頁面項目使用 gulp 構建一個項目使用gulp構建一個項目 webpack(零工程構建一個前端項目)詳解 webpack進階構建項目(一) 用Webpack構建Vue項目 webpack構建react項目(一) webpack 4.x 解決 webpack-dev-server工具在webpack構建的項目中使用問題 vue 項目使用 webpack 構建自動獲取電腦ip地址 [react001] 使用webpack自動構建react 項目