此文根据阮一峰大神的demo结合自己的配置项目改编而成:github
1、demo01,这个是一个非常简单的demo,请仔细实践上一篇。
2、dem02,配置多入口文件:
2.1、新建src/search.js,输入document.write(‘i am search’);
2.2、dist/index.html 加上:<script src="./bundle2.js"></script>
2.3、 webpack.config.js
var path = require('path');
const config = {
entry: {
bundle:'./src/index.js',
bundle2:'./src/search.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'//这里的[name]是占位符,之后会替换为 bundle1、bundle2
},
devServer : {
host: 'localhost', // 服务器的IP地址,可以使用IP也可以使用localhost
compress: true, // 服务端压缩是否开启
port: 3004, // 端口
hot: true,
open: true, // 自动打开浏览器
overlay: {
errors: true
}
}
}
module.exports = config;
2.4、运行:npm run build 然后运行:npm run dev
3、demo3,将js转为es
4、demo import css 引入css
4.1、创建src/style/app.css文件
4.2、安装style-loader和css-loader
npm install style-loader css-loader --save-dev
4.3、src/index.js
import './styles/index.css';//使用import将css引入到js
document.write('hello wrold');
4.4、webpack.config.js
var path = require('path');
const config = {
entry: {
bundle:'./src/index.js',
bundle2:'./src/search.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'//这里的[name]是占位符,之后会替换为 bundle1、bundle2
},
module: {
rules:[
{
test: /\.css$/,
loader: [ 'style-loader', 'css-loader' ]//此处用use不知道为什么报错
},
]
},
devServer : {
host: 'localhost', // 服务器的IP地址,可以使用IP也可以使用localhost
compress: true, // 服务端压缩是否开启
port: 3004, // 端口
hot: true,
open: true, // 自动打开浏览器
overlay: {
errors: true
}
}
}
module.exports = config;
4.5 npm run build,会发现index.html的head运行时会添加style节点,这是bundle.js的运行结果。
5、demo05处理图片(使用loader)
5.1、添加两张图片到src文件夹
5.2、index.js
import './styles/index.css';
var img1 = document.createElement("img");
img1.src = require("./small.png");
document.body.appendChild(img1);
var img2 = document.createElement("img");
img2.src = require("./big.png");
document.body.appendChild(img2);
5.3、styles/index.css添加
.img{
width: 100px;
height:100px;
background:url(../big.png);
}
5.4、webpack.config.js
var path = require('path');
const config = {
entry: {
bundle:'./src/index.js',
bundle2:'./src/search.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'//这里的[name]是占位符,之后会替换为 bundle1、bundle2
},
module: {
rules:[
{
test: /\.css$/,
loader: [ 'style-loader', 'css-loader' ]
},
{//新增这里
test: /\.(png|jpg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
}
]
},
devServer : {
host: 'localhost', // 服务器的IP地址,可以使用IP也可以使用localhost
compress: true, // 服务端压缩是否开启
port: 3004, // 端口
hot: true,
open: true, // 自动打开浏览器
overlay: {
errors: true
}
}
}
module.exports = config;
5.5、insall loader
npm install --save-dev url-loader file-loader
5.6、运行
npm run build
6、demo06
7、demo07 压缩js(使用插件 plugins)
webpack.config.js
var path = require('path');
var webpack = require('webpack');
var UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const config = {
entry: {
bundle:'./src/index.js',
bundle2:'./src/search.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'//这里的[name]是占位符,之后会替换为 bundle1、bundle2
},
module: {
rules:[
{
test: /\.css$/,
loader: [ 'style-loader', 'css-loader' ]
},
{
test: /\.(png|jpg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
}
]
},
plugins: [ //新增这里
new UglifyJsPlugin()
],
devServer : {
host: 'localhost', // 服务器的IP地址,可以使用IP也可以使用localhost
compress: true, // 服务端压缩是否开启
port: 3004, // 端口
hot: true,
open: true, // 自动打开浏览器
overlay: {
errors: true
}
}
}
module.exports = config;
7.2、运行npm run build(然而好像并没有压缩,因为本来就是个压缩文件)
更新中……..