webpackage 2.x 使用
安裝---(在項目目錄下)
//1.初始化npm的配置(添加package.json)
npm init
//2.安裝 webpackage
npm install webpack --save-dev
配置webpackage
項目結構如下
添加主頁
<!DOCTYPE html>
<html>
<header>
<title>webpackage</title>
<script src="dist/main.js"></script>
<!-- <link rel="stylesheet" href="dist/main.css"> -->
</header>
<body>
<div>WebPackage Test</div>
</body>
</html>
添加main.js
/**
路徑問題
./ 表示當前路徑
../表示上一級目錄
/.../.../xxx.js表示絕對路徑
*/
import './main.css';
// require('./main.css');
document.write("Add Something Test");
添加css
div{
color:red;
}
添加文件webpack.config.js
var webpack = require('webpack');
module.exports = {
entry: [
//入口文件 需要處理的文件
'./dev/main.js'
],
//輸出文件配置
output: {
//配置目錄
path: __dirname+'/dist',//distribution
//配置生成的名字
filename: '[name].js'
},
module: {
//配置文件使用什么loader加載
rules: [{
test: /\.css$/,
//打包到js里面
use: [ 'style-loader', 'css-loader' ]
}]
}
}
安裝插件
npm install --save-dev css-loader
npm install style-loader --save-dev
npm install --save-dev script-loader
運行
webpack
參數解析
webpack --config XXX.js //使用另一份配置文件打包
webpack --watch //監聽變動並自動打包
webpack -p //壓縮混淆腳本
webpack -d //生成map映射文件
說明
css文件默認打包到生成的js里面
生成單獨的css文件
安裝插件
npm install --save-dev extract-text-webpack-plugin
修改配置
var webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: [
'./dev/main.js'
],
output: {
path: __dirname+'/dist',//distribution
filename: '[name].js'
},
module: {
rules: [{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}]
}
,plugins: [
new ExtractTextPlugin("[name].css")
]
}
參考鏈接
webpack 教程
官方github
extract-text-webpack-plugin
script-loader
style-loader
css-loader
require路徑