Webpack安装及打包js、css文件示例
什么是Webpack
Webpack 是一個前端資源加載/打包工具。它將根據模塊的依賴關系進行靜態分析，然后將這些模塊按照指定的規則生成對應的靜態資源。Webpack 可以將多種靜態資源 js、css、less 轉換成一個靜態文件，減少了頁面的請求。
Webpack安裝
全局安裝
npm?install?webpack -g npm?install?webpack‐cli -g安裝后查看版本號
webpack -v快速入門
js打包
（1）創建src文件夾，創建bar.js
exports.info=function(str){document.write(str); }（2）src下創建logic.js
exports.add=function(a,b){return a+b; }（3）src下創建main.js
var bar = require('./bar'); var logic = require('./logic'); bar.info('hello world!' + logic.add(100, 300));（4）創建配置文件webpack.config.js ，該文件與src處于同級目錄
var path = require('path'); module.exports = {entry: './src/main.js',output: {path:path.resolve(__dirname,'./dist'),filename:'bundle.js'} }以上代碼的意思是：讀取當前目錄下src文件夾中的main.js（入口文件）內容，把對應的js文件打包，打包后的文件放入當前目錄的dist文件夾下，打包后的js文件名為bundle.js。
（5）執行編譯命令
（6）執行后查看bundle.js 會發現里面包含了上面兩個js文件的內容。
（7）創建index.html ,引用bundle.js
測試調用index.html，會發現有內容輸出。
css打包
（1）安裝style-loader和?css-loader
Webpack 本身只能處理 JavaScript 模塊，如果要處理其他類型的文件，就需要使用loader 進行轉換。
Loader 可以理解為是模塊和資源的轉換器，它本身是一個函數，接受源文件作為參數，返回轉換的結果。這樣，我們就可以通過?require?來加載任何類型的模塊或文件，比如CoffeeScript、 JSX、 LESS 或圖片。首先我們需要安裝相關Loader插件，css-loader 是將 css 裝載到 javascript；style-loader 是讓 javascript 認識css。
（2）修改webpack.config.js
var path = require('path'); module.exports = {entry: './src/main.js',output: {path: path.resolve(__dirname, './dist'),filename: 'bundle.js'},module: {rules: [{test: /\.css$/,use: ['style-loader', 'css-loader']}]} }（3）在src文件夾創建css文件夾,css文件夾下創建css1.css
body{background: red; }（4）修改main.js ，引入css1.css
require('./css/css1.css')//新增內容 var bar = require('./bar'); var logic = require('./logic'); bar.info('hello world!' + logic.add(100, 300));（5）重新運行webpack。
（6）運行index.html看看背景是不是變成紅色啦？
總結
以上是生活随笔為你收集整理的Webpack安装及打包js、css文件示例的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： idea GsonFormat插件使用报
- 下一篇： npm常用命令：ini他、install