webpack 简易配置入门教程 #12
Comments
处理scss文件。既然都用到了webpack自动打包了，那也顺便使用webpack去处理scss文件（个人爱好是scss，less的处理同理），顺便也处理完css中的其他兼容性问题和浏览器前缀问题吧（程序员的思维就是，懒）。 现在css中需要处理的有：
安装上书postcss-loader的插件： 现在在webpack中处理css的问题，基本都是通过一个 先新建一个文件夹，用于存放所有的scss文件： 再新建一个index.scss, body{
background: black;
color: white;
h2{
transform: translateX(10px) rotateZ(-10deg);
color: red;
opacity: 0.5;
}
}将postcss的加载器中需要的单独提取出来放在一个配置文件中： module.exports = {
plugins: [
// minify css
require('cssnano')({
preset: 'default'
}),
// 处理css前缀
require('autoprefixer')({
browserslist: [
"> 1%",
"last 2 versions",
"Edge",
"ie >= 9"
]
}),
// 处理flex浏览器兼容性
require('postcss-flexibility'),
// 处理css中rgba颜色代码
require('postcss-color-rgba-fallback'),
// 处理css中opacity的IE兼容性。
require('postcss-opacity')
]
}修改 webpack.config.js: var webpackConfig = {
...
module: {
rules: [{
// 处理css文件
test: /\.(scss|sass|css)$/,
// loader: "css-loader?importLoaders=1!postcss-loader!sass-loader",
// loader执行顺序是从右到左：sass-loader -> postcss-loader -> css-loader
use: [
"style-loader",
{
loader: "css-loader",
options: {
// // 0 => no loaders (default); 1 => postcss-loader; 2 => postcss-loader, sass-loader
importLoaders: 2
}
},
'postcss-loader',
'sass-loader'
]
},
...
]
}
...
}
module.exports = webpackConfig修改一下入口文件中的样式引入： require('../scss/index.scss')
console.log('hello world');打包测试： 完美通过。 |
处理pug/jade文件项目有很多的页面，而且页面之间也有很多相同的页面，之前写惯了vue的组件，所以注册我们也引入了pug作为前端模板引擎。 pug 的前身就是 jade ，所以语法什么都得基本都是一致的。具体的看 官网 。 和处理css的一样，先要安装加载器。 新建一个简单的页面： html
title Test.html
body
h2 Welcome to pug.
p This is from index.pug修改一下配置文件中的html模板入口： var webpackConfig = {
...
plugins: [
// 公共js提取
new webpack.optimize.CommonsChunkPlugin({
name: 'vendors', // 将公共模块提取，生成名为`vendors`的chunk
}),
// 提取公共css样式
new ExtractTextPlugin('./css/[name].css'),
// 处理html文件。
new HtmlWebpackPlugin({
filename: './view/index.html', //生成的html存放路径，相对于path
template: './src/view/index.pug', //html模板路径
inject: 'body', //js插入的位置，true/'head'/'body'/false
hash: true, //为静态资源生成hash值
chunks: ['vendors', 'index'], //需要引入的chunk，不配置就会引入所有页面的资源
minify: { //压缩HTML文件
removeComments: true, //移除HTML中的注释
collapseWhitespace: false //删除空白符与换行符
}
})
],
...
}
module.exports = webpackConfig重新编译打包： |
使用 babel 来“编译”你的js在项目开发中，难免会遇到使用 es6 ，甚至 es7 去编写js。但是大部分浏览器却不支持这些语法，这时候，就需要 babel-loader 来处理js，并将其转换为浏览器能识别的 es5 语法。 还是要安装依赖： 如果用上了es7 的语法，就要根据不同阶段语法提案的转码规则（共有4个阶段），选装一个： $ npm i -D babel-preset-stage-0
$ npm i -D babel-preset-stage-1
$ npm i -D babel-preset-stage-2
$ npm i -D babel-preset-stage-3新建一个 {
"presets": ["es2015"],
"plugins": []
}修改 webpack 配置文件： var webpackConfig = {
...
module: {
rules: [{
test: /\.js$/,
// 不编译 node_modules 下的文件
exclude: /node_modules/,
loader: "babel-loader"
}]
}
...
}
module.exports = webpackConfig在 index.js 中写个 es6 的语法： require('../scss/index.scss')
console.log('hello world');
((message) => {
console.log(message);
})('message from es6')
let step = 2;
var add = number => number*=step
console.log(add(2));来，打包看看： |
配置多文件入口项目有多个页面，每个页面都对应着一个js入口和一个页面，但是，入口 entry 和 html-webpack-plugin 每次只能配置一个具体的入口文件，如果每增加一个页面就要去配置，那么这无形之中增加了工作量，因此，我们需要一个通用的入口文件。 既然在node中可以访问文件夹并读取其中的文件名，那么我们可以使用node来去循环读取文件夹下的js文件，并自动添加至入口配置中： 新建一个config 文件夹，以存放webpack可变的配置，方便以后修改： 因为遍历入口文件都是一样的操作流程，所以先写一个工具包： var fs = require('fs');
// 递归遍历文件夹，获取入口文件
function getAllFiles(dirRoot, type){
var filterReg = new RegExp('.'+type+'$');
function getAllFileFromDir(root) {
var res = [], files = fs.readdirSync(root)
files.forEach((file) => {
var pathname = root+'/'+file,
state = fs.lstatSync(pathname)
if (!state.isDirectory()) {
// 过滤相对应的文件
filterReg.test(pathname) && res.push(pathname)
// res.push(pathname.replace(dir_root+'/', ''))
}else{
res = res.concat(getAllFileFromDir(pathname))
}
})
return res
}
return getAllFileFromDir(dirRoot)
}
function getEntry(files, replaces){
var entry = {}
for (var i = 0; i < files.length; i++) {
var filename = files[i]
replaces.map((replace) => {
filename = filename.replace(replace, '')
})
entry[filename] = files[i]
}
return entry
}
module.exports = {
getAllFiles,
getEntry
}再新建一个 js 入口文件配置： var path = require('path');
var utils = require('./utils.js')
var dir_root = path.resolve(__dirname, '../src/js');
// console.log(getAllFiles(dir_root));
var allFiles = utils.getAllFiles(dir_root, 'js')
var entry = utils.getEntry(allFiles, ['js', dir_root+'/'])
console.log(entry);
module.exports = entry同样的，页面入口文件也添加一个： var webpack = require('webpack')
var path = require('path');
var utils = require('./utils.js')
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');
var entry = require('./webpack.entry.js')
var plugins = [
// 公共js提取
new webpack.optimize.CommonsChunkPlugin({
name: 'vendors', // 将公共模块提取，生成名为`vendors`的chunk
minChunks: 3 // 提取至少3个模块共有的部分
}),
// 提取公共css样式
new ExtractTextPlugin('./css/[name].css'),
]
let dir_root = path.resolve(__dirname, '../src/view');
var pugFiles = utils.getAllFiles(dir_root, 'pug')
pugFiles = utils.getEntry(pugFiles, ['.pug', dir_root+'/'])
for (var key in pugFiles) {
if (pugFiles.hasOwnProperty(key)) {
let opt = {
filename: './view/'+ key +'.html',
template: pugFiles[key],
hash: true,
minify: { //压缩HTML文件
removeComments: true, //移除HTML中的注释
collapseWhitespace: false //删除空白符与换行符
}
}
if (entry.hasOwnProperty(key)) {
opt['chunks'] = ['vendors', key]
opt['inject']= 'body'
}
console.log(opt);
plugins.push(new HtmlWebpackPlugin(opt))
}
}
module.exports = plugins再次修改webpack的配置： var entry = require('./config/webpack.entry.js')
var plugins = require('./config/webpack.plugins.js')
var webpackConfig = {
entry,
plugins,
...
}
module.exports = webpackConfig
|
其他处理
|
|
|
|
@wzc0x0 噢，那是因为装的是 postcss 的插件，所以没把postcss-loader算进去。 |
|
新增仓库：webpack 多页面配置Demo |
最近公司弄了个有150+页面的项目，心想，终于有机会可以去学习webpack了，以前想学却没有实际项目去引导逼迫去学，现在终于领略到了webpack的强大了。
什么是webpack
在前端的项目开发中，总有大量的页面和样式需要处理，而维护这些文件也成了头疼的问题。
为了简化开发，于是就有很多好的开发方式，如：
这些方式确实可以大大提高开发效率，但是每种方式都有自己的打包方式，还有兼容性处理，如果纯手动处理，必然会增加工作量。
但是，现在有了webpack，上述问题基本解决了，一个webpack就可以处理各种繁琐的过程，给你一个清爽，快速的开发环境。
简单的来说，在项目开发中，
webpack可以将你项目中的所有文件，处理成浏览器能识别的文件。
开始使用webpack
先新建一个练手用的空文件夹
$ mkdir webpack-demo，并进入该文件夹。新建
package.json.安装webpack及其基本插件。
其中：
import和require，并处理他们。配置webpack。
新建一个配置文件：
$ touch webpack.config.js测试配置文件：
先设置开发文件夹目录：
新建一个 html 文件：
$ touch ./src/view/index.html。新建css文件：
$ touch ./src/css/index.css。新建js文件：
$ touch ./src/js/index.js。测试打包：
$ webpackOK!基本的配置就完成了。
我们可以看到，在项目中多了一个dist文件夹，里面存放的就是刚刚打包好的文件。打开index.html（需要在服务器中打开，并且服务器根目录为dist）可以看到，生成的html文件，征程显示我们写的内容，css样式则直接写入了style标签当中，而且自动引入了两个js文件，其中，vendors是带有公共部分的js文件，index则是我们一开始写的js逻辑文件。
The text was updated successfully, but these errors were encountered: