老规矩 直接上干货。只要跟着做就能实现。
现在是2017年12月,千万不要盲目升级webpack3, 很多坑,非常不稳定。2.2.1很稳定建议暂时不要升级3
安装
首先全局安装webpack 目前最新的是2.2.1
rpm install -g webpack
在项目目录中安装插件包
npm install webpack@2.2.0-rc.2 webpack-dev-server@2.2.0-rc.0 html-webpack-plugin@2 html-loader css-loader style-loader file-loader url-loader --save-dev
使用方法一:
创建模块入口文件 项目目录/src/app.js
//引入src/test.js模块
cats = require('./test.js');
console.log(test);
创建模块 项目目录/src/test.js
//输出模块
var test = ['t1', 't2', 't3'];
module.exports = test;
在src目录下 输入下列领命 即可创得到处理后的js文件
webpack app.js app.bundle.js
使用方法二:
通过使用配置文件的方法使用webpack
在项目根目录下创建webpack配置文件webpack.config.js
module.exports = {
//定义入口文件
entry: './src/app.js',
//定义输出文件
output: {
path: './dist',
filename: 'app.bundle.js'
}
};
然后就可以直接输入打包命令
//打包当前目录中 配置文件中所示的程序
webpack
如果加-p 即可同时完成代码压缩混淆
//混淆压缩代码
webpack -p
使用node命令可以直接获取模块输出
node dist/app.bundle.js
解析模块
添加bable
//安装abbel
npm install babel-core babel-preset-es2015
//安装babelloader
rpm install babel-loader --save-dev
module.exports = {
entry: './src/app.js',
output: {
path: './dist',
filename: 'app.bundle.js',
},
module: {
loaders: [
//js处理
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
//css处理
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.scss$/,
loader: "style!css!sass"
},
{
test: /\.less$/,
loader: "style!css!less"
},
]
}
}
添加第三方库
//安装jquery 和es2015兼容库
npm install jquery babel-polyfill --save
修改src/app.js文件
import 'babel-polyfill';
import cats from './test';
import $ from 'jquery';
$('<h1>Cats</h1>').appendTo('body');
const ul = $('<ul></ul>').appendTo('body');
for (const cat of cats) {
$('<li></li>').text(cat).appendTo(ul);
}
启用压缩插件
//定义webpack组件
const webpack = require('webpack');
module.exports = {
entry: './src/app.js',
output: {
path: './dist',
filename: 'app.bundle.js'
},
module: {
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
}]
},
//压缩插件
plugins: [
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
},
output: {
comments: false,
},
}),
]
};
显示所有隐藏模块
这里写代码片
监控文件改动 自动处理
//该命令会自动只检索发生改变的部分。速度很快
ebpack --watch
启用预览服务器
//安装webpack服务器
npm install webpack-dev-server --save-dev
//运行服务器
webpack-dev-server --progress --colors
webpack-dev-server --inline
//访问预览地址 后面name为entry入口文件名 不加.JS
http://localhost:8080/webpack-dev-server/[name]
配置typescript
//安装typescript
npm install -g typescript
//配置tsconfig.json
//安装loader
npm install ts-loader --save-dev
//简单配置
module.exports = {
entry: "./src/index.tsx",
output: {
filename: "bundle.js"
},
resolve: {
// Add '.ts' and '.tsx' as a resolvable extension.
extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
},
module: {
loaders: [
// all files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'
{ test: /\.tsx?$/, loader: "ts-loader" }
]
}
};
dist目录自动清除
//安装模块
npm install rimraf --save-dev
//修改package.json 添加rimraf dist
{
"scripts": {
"build": "rimraf dist && webpack -p --env.config production"
},
}
css自动添加跨浏览器版本前缀
//安装
npm install postcss-loader autoprefixer --save-dev
//修改 loader 添加pstcss-loader
{
test: /\.css$/,
loader: 'style-loader!css-loader!postcss-loader'
}
//创建文件 postcss.config.js
module.exports = {
plugins: [
require('autoprefixer')()
]
}
完整的基本配置模块
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = (options = {}) => {
return {
//入口文件 可多个 key为文件名 输出可用[name]引用
entry: {
app: __dirname + '/src/app.js',
// tsapp: __dirname + '/src/tsapp.ts',
vendor: ['jquery', 'axios'],
},
//出口文件 根据入口文件名自动生成
output: {
// publicPath: "http://127.0.0.1:9090/static/dist/",
// publicPath: '/assets/',
path: __dirname + '/dist',
filename: '[name].bundle.js'
},
resolve: {
// Add '.ts' and '.tsx' as a resolvable extension.
extensions: ["css", ".sass", "style!css!less", "html", ".ts", ".tsx", ".js", "less"]
},
module: {
//代码解析器
loaders: [
//babel
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
//css
{
test: /\.css$/,
loader: 'style-loader!css-loader!postcss-loader'
},
//scss
{
test: /\.scss$/,
loader: "style!css!sass"
},
//less
{
test: /\.less$/,
loader: "style!css!less"
},
//html
{
test: /\.html/,
loader: 'html-loader',
},
//typescript
{
test: /\.tsx?$/,
loader: "ts-loader"
},
//低于10000字节的文件解析为base64编码 匹配各种格式的图片和字体文件
{
test: /\.(png|jpg|jpeg|gif|eot|ttf|woff|woff2|svg|svgz)(\?.+)?$/,
loader: 'url-loader',
options: {
limit: 10000
},
}
],
},
//插件
plugins: [
//代码压缩 生产时使用
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
},
output: {
comments: false,
},
}),
//自动生成引用js的html入口文件
new HtmlWebpackPlugin({
// template: './src/index.html'
// index: __dirname +
//生成网页标题
title: "test111",
//文件名与地址
filename: __dirname + '/index.html',
//化为hash
// hash : true,
//缓存
//cache:false,
//使用模版
// template: __dirname + '/index.html',
//模版注入位置
// inject: 'body'
}),
//第三方库 在input处 设置后,在这里引入
new webpack.optimize.CommonsChunkPlugin({
names: ["vendor"],
minChunks: Infinity
})
],
//预览服务器配置
devServer: {
port: 8080,
/*
historyApiFallback用来配置页面的重定向
SPA的入口是一个统一的html文件, 比如
http://localhost:8010/foo
我们要返回给它
http://localhost:8010/index.html
配置为true, 当访问的文件不存在时, 返回根目录下的index.html文件
*/
historyApiFallback: true,
//控制台输入webpack-dev-server -d --hot --env.dev 即可预览 但是这个预览只能预览项目文件 就是入口的.JS JSX TS 等。不能从主页html预览。因为主页是静态的,他引用的也是之前生成的js文件。如果要预览全局 需要--watch
//-d 是开发模式 --hot是热更新
},
performance: {
hints: options.dev ? false : 'warning',
}
}
};