webpack超详细配置
在這里就不詳細介紹webpack來源以及作用了, 本篇博文面向新手主要說明如何配置webpack, 以及webpack的使用方法, 直到創建出一個合理的屬于自己webpack項目;
流程
webpack安裝
Step 1:?首先安裝Node.js, 可以去Node.js官網下載.
Step2:?在Git或者cmd中輸入下面這段代碼, 通過全局先將webpack指令安裝進電腦中
npm install webpack -g- Step3:?使用Git Bash here 或者 cmd cd命令使當前目錄轉到當前項目的目錄下, 然后輸入下面這段命令
npm init
接下來會彈出一些信息, 就是一些項目名和一些參數的描述, 可以全部按回車使用默認信息, 完成之后項目文件夾下會生成一個package.json的文件
這樣webpack就安裝完成了.
webpack配置
- Step1:?創建項目文件夾, 名字自起, 但路徑名不要包含中文, 以及項目名也不要叫”webpack”, 并且不要包含大寫字母.
例: - Step2:?接下來創建并編寫配置文件. 首先我們先介紹幾個配置文件的參數.?
- entry： 是 頁面入口文件配置 （html文件引入唯一的js 文件）
- output：對應輸出項配置?
- path ：入口文件最終要輸出到哪里，
- filename：輸出文件的名稱
- publicPath：公共資源路徑
- Step3:?在你的項目目錄下創建webpack.config.js配置文件, 通過這個文件進行webpack的配置, 并且還要創建一些路徑保存基本文件. 例如:?
src文件夾 Step4:?在src的js下創建一個入口文件, 我創建的叫做entry.js, 在項目目錄再創建一個index.html用來調試使用. 編寫webpack.config.js文件,
//webpack.config.js module.exports = {entry : './src/js/entry.js',//入口文件output : {//輸出文件filename : 'index.js',//輸出文件名path : __dirname + '/out'//輸出文件路徑}, }我們隨便在index.html和入口文件entry.js寫點什么看看是否成功配置,
//index.html <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" /><title>ss</title> </head> <body> 111<script src="./out/index.js"></script>//注意在這里引入的是打包完成的js文件 </body> </html>之后使用Git Bash here 或者 cmd cd命令使目錄為當前項目目錄, 輸入webpack或者webpack -w命令, 查看index.html是否成功console出1234;
webpack 和 webpack -w 區別?
webpack -w可以對項目打包并且實時監控, 當前配置文件下的文件如果發生更改時重新打包, 但如果webpack的配置文件即webpack.config.js更改時還是要通過webpack進行打包.(退出webpack -w 操作 ctrl+c)
webpack loader加載器
接下來我們繼續配置loader, 通過加載器處理文件：比如 sass less 等, 告知 webpack 每一種文件都需要使用什么加載器來處理。
Step1:?為了方便我們先統一把所有的包都先下載下來, 下面再慢慢解釋.
npm install babel-loader babel babel-core css-loader style-loader url-loader file-loader less-loader less --save-devStep2:?下載完成后, 我們修改webpack.config.js文件, 將加載器引入.
module.exports = {entry : './src/js/entry.js',output : {filename : 'index.js',path : __dirname + '/out'},module : {rules: [{test: /.js$/, use: ['babel-loader']},{test: /.css$/, use: ['style-loader', 'css-loader']},/*解析css, 并把css添加到html的style標簽里*///{test: /.css$/, use: ExtractTextPlugin.extract({fallback: 'style-loader',use: 'css-loader'})},/*解析css, 并把css變成文件通過link標簽引入*/{test: /.(jpg|png|gif|svg)$/, use: ['url-loader?limit=8192&name=./[name].[ext]']},/*解析圖片*/{test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader']}/*解析less, 把less解析成瀏覽器可以識別的css語言*/]},}Step3:?接下來我們先測試css, 我們在項目文件夾下的src文件夾下創建index.css. 隨便寫一點屬性.?
//index.css .demo1 {width: 100px;height: 100px;background: red; } .demo2 {width: 200px;height: 200px;background: orange; }//index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>text</title> </head> <body> <div class="demo1"></div> <div class="demo2"></div> <script src="./out/index.js"></script> </body> </html>因為在webpack中所有文件都是模塊, 所以必須要將css引入. 在剛剛的entry.js中添加如下代碼.
//entry.js require('../css/index.css');//引入css文件 console.log("1234");打包webpack一下看看效果?
Step4:?當有多個js文件時, 如何進行引入呢? 接下來我們做一個簡單小功能來說明這個問題, 讓我們點擊方塊的時候, 方塊變大.
接下來在src的js文件夾下創建一個基本的工具tool.js?(很多小的問題都被我擴大化了, 只是為了說明問題不一定適用)
//tool.js var tool = {//獲取DOM元素getDom: function(className) {return document.getElementsByClassName(className)[0];} }module.exports = tool;//模塊出口src的js下創建一個demo1.js文件, demo2.js同理
var obj = require('./tool.js');var demo1 = {init: function() {this.bindEvent();},bindEvent: function() {//var demo1 = document.getElementsByClassName('demo1')[0];var demo1 = obj.getDom('demo1');demo1.onclick = this.changeStyle;},changeStyle: function() {this.style.width = '200px';this.style.height = '200px';this.style.background = 'green';console.log('1');} }module.exports = demo1;修改入口文件entry.js
require('../css/index.css');var demo1 = require('../js/demo1.js'); var demo2 = require('../js/demo2.js');demo1.init();demo2.init();webpack一下, 看看效果?
關于圖片的打包
- Step1:?在img文件夾下隨便找一個小一點的圖片放進去.
Step2:?修改entry.js
require('../css/index.css');var demo1 = require('../js/demo1.js'); var demo2 = require('../js/demo2.js');demo1.init();demo2.init();var oImg = new Image(); oImg.src = require('../img/1.gif');//當成模塊引入圖片 document.body.appendChild(oImg);由于我們引入的是靜態資源, 在webpack.config.js中修改一下
module.exports = {entry : './src/js/entry.js',output : {filename : 'index.js',publicPath: __dirname + '/out',//添加靜態資源, 否則會出現路徑錯誤path : __dirname + '/out'},module : {rules: [{test: /.js$/, use: ['babel-loader']},{test: /.css$/, use: ['style-loader', 'css-loader']},/*解析css, 并把css添加到html的style標簽里*///{test: /.css$/, use: ExtractTextPlugin.extract({fallback: 'style-loader',use: 'css-loader'})},/*解析css, 并把css變成文件通過link標簽引入*/{test: /.(jpg|png|gif|svg)$/, use: ['url-loader?limit=8192&name=./[name].[ext]']},/*解析圖片*/{test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader']}/*解析less, 把less解析成瀏覽器可以識別的css語言*/]}, }大家自己webpack看看效果
webpack進階設定
我們在項目中有多個html文件時怎么處理呢?, 接下來我們重新設定配置文件, webpack.config.js
module.exports = {entry : {index1: './src/js/entry.js', index2: './src/js/entry2.js'},output : {filename : '[name].js',//這樣就可以生成兩個js文件, 名字分別為index1.js, 和index2.jspublicPath: __dirname + '/out',//添加靜態資源, 否則會出現路徑錯誤path : __dirname + '/out'},module : {rules: [{test: /.js$/, use: ['babel-loader']},{test: /.css$/, use: ['style-loader', 'css-loader']},/*解析css, 并把css添加到html的style標簽里*///{test: /.css$/, use: ExtractTextPlugin.extract({fallback: 'style-loader',use: 'css-loader'})},/*解析css, 并把css變成文件通過link標簽引入*/{test: /.(jpg|png|gif|svg)$/, use: ['url-loader?limit=8192&name=./[name].[ext]']},/*解析圖片*/{test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader']}/*解析less, 把less解析成瀏覽器可以識別的css語言*/]},}webpack插件使用
首先我們由于要使用webpack插件, 因此我們要重新下載一下webpack包, 將目錄定位到當前項目目錄, 輸入npm install webpack?
之后我們修改webpack.config.js, 將下面代碼放到配置文件開頭. 這樣就可以使用插件了
將插件信息寫到配置文件里
var webpack = require('webpack'); var uglifyPlugin = new webpack.optimize.UglifyJsPlugin({minimize: true});//代碼壓縮var CommonsChunkPlugin = new webpack.optimize.CommonsChunkPlugin('common');//把公共模塊提取出來, 并取名為'common'(名字自起), webpack之后再out文件夾下生成common.js, 測試時記得引入提取出來的公共模塊js文件var ExtractTextPlugin = require("extract-text-webpack-plugin");//將css獨立引入變成link標簽形式, 使用該插件需要獨立下載'npm install extract-text-webpack-plugin --save-dev', 同時下面的rules也必須更改var providePlugin = new webpack.ProvidePlugin({$: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery'});//引入jquerymodule.exports = {entry : {index: './src/js/entry.js', index2: './src/js/entry2.js'},output : {filename : '[name].js',publicPath: __dirname + '/out',path : __dirname + '/out'},module : {rules: [{test: /.js$/, use: ['babel-loader']},//{test: /.css$/, use: ['style-loader', 'css-loader']},{test: /.css$/, use: ExtractTextPlugin.extract({fallback: 'style-loader',use: 'css-loader'})},{test: /.(jpg|png|gif|svg)$/, use: ['url-loader?limit=8192&name=./[name].[ext]']},{test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader']}]},plugins: [uglifyPlugin, CommonsChunkPlugin, new ExtractTextPlugin('[name].css'),providePlugin]//插件集合 }webpack服務器
首先先定位目錄輸入命令?npm install webpack-dev-server -g?
, 修改webpack.config.js文件
- 1
html文件所引用的目錄也要更改:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" /><title>text</title><link rel="stylesheet" href="http://localhost:8080/out/index.css"> </head> <body><a href="http://localhost:8080/index2.html">11</a><div class="demo1"></div><div class="demo2"></div><script src="http://localhost:8080/out/common.js"></script><script src="http://localhost:8080/out/index.js"></script> </body> </html>webpack-dev-server一下看看效果
小工具: webpace-dev-server –devtool eval-source-map –progess –colors打包時輸入這一行可以直接找到文件如果出錯時的位置
小知識點: 上面這一句話如果覺得太長可以將
"scripts": {"test": "echo \"Error: no test specified\" && exit 1","xuan": "webpack-dev-server --devtool eval-source-map --progress --colors"},這一段代碼放到項目目錄下的package.json里, 這樣調試時如果輸入npm run xuan就等于輸入那一長串代碼
總結
以上是生活随笔為你收集整理的webpack超详细配置的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Javascript重温OOP之原型与原
- 下一篇： 小白十分钟-推荐导航栏