全局安裝安裝webapck

npm i webpack -g

現在我們就可以全局的使用webpack命令了

webpack中基礎的命令：

webpack enter.js output.js --watch

這個命令是將enter.js打包成output.js，然后html只需要引用該文件就可以了
看如下entry.js,這是簡單的js代碼。

// 這邊是處理js邏輯 let people = require('./people') let $ = require('jquery')$.each(people, function(key, value){$('body').append('<h1>'+people[key].name+'</h1>') })

那么如何來打包css文件呢，只需要將css也引入到enter.js即可，這樣跟文件index.html還是只需要引用output.js即可
引入css需要幾個插件；css-loader， style-loader（由于是靜態文件，需要編譯）

require('!style-loader!css-loader!./style.css')

以上為簡單的打包；如果需要復雜的工程的話，webpack推薦使用配置文件來配置
webpack的配置文件必須是webpack.config.js
上面的配置只需要這樣寫

module.exports = {// 入口文件entry: './app.js',// 出口文件output: {path: __dirname,filename: 'bundle.js'},// 需要依賴的插件或裝載器mudule: {loader: [{test: /\.css$/,loader: 'style-loader!css-loader'}]} }

以下是一個簡易的開發目錄

針對該目錄配置文件如下
ps: 需要將es6轉碼需要安裝 babel-core,babel-loader,babel-env,babel-preset-es2015

module.exports = {// 入口文件entry: '.src/js/app.js',// 出口文件output: {path: __dirname,filename: 'bundle.js'},// 需要依賴的插件或裝載器mudule: {loader: [// css加載{test: /\.css$/,loader: 'style-loader!css-loader'},// es6轉碼為es2015{test: /\.js/,loader: 'babel-loader',query: {presets: ['es2015'] // ps這一塊也可以寫在.babelrc文件下},exclude: /node_modules/}]},// 自動生成html文件，會引入jsplugins: [new webpack.optimize.UglifyJsPlugin(),new HtmlWebpackPlugin({template: './index.html'})] }

總結

以上是生活随笔為你收集整理的webpack学习的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。