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路径