吃灰前端的webpack学习二

打杂Domingo
221 阅读2分钟

有了第一次的经历之后，那么也算是入门webpack了，所以这篇文章不算是入门的了，讲的会比较深入一点配置更加自动化的webpack，我毕竟是吃灰的，会点webpack总比不会的好，毕竟用起来也不难。

1、解析scss,less,以及postcss自动添加更多css兼容性属性

直接安装

npm install --save-dev node-sass sass-loader less-loader less //这些都是loader

//scss只是sass3的一种新的语法，都是为了让css更加好的维护

配置如下，必须要单独配置的哦，不然会出错的，我建议小伙伴们都使用scss，因为我在项目中也是使用scss（我老大喜欢,[微笑]）

module: {
    rules: [
        {
            test: /\.(css|less|scss)$/, //这个匹配可以分开的写,也可以单独的写,看个人喜欢哦,
            use: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: [
                    {
                        loader:'css-loader'
                    },
                    {
                        loader:"sass-loader"
                    },
                    {
                        loader:"less-loader"
                    }
                ]
            })
        }
    ]
},

然后创建一个test.less和test.scss的文件,记得在文件里面写点东西哦

接着要在index.js里面引入进去哦,因为webpack就是打包index.js里面的东西以及依赖嘛

import css from '../css/index.css'
import less from '../css/test.less'
import scss from '../css/test.scss'

接着就是npm run build 啦

所有都已经被转化了呢

还有就是自动添加css3的各种兼容属性

npm install --save-dev postcss-loader autoprefixer

接着在package.json的同级目录配置

postcss.config.js

如图


接着又在webpack.config.js里面配置一下module.rules就行了

module: {
    rules: [
        {
            test: /\.(css|less|scss)$/,
            use: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: [
                    {
                        loader:'css-loader',
                        options: { importLoaders: 1 }
                    },
                    {
                        loader:"sass-loader"
                    },
                    {
                        loader:"less-loader"
                    },
                    {
                        loader:"postcss-loader"
                    }
                ]
            })
        }
    ]
},

在index.css里面随便写点transform:translate3d(0,0,0)之类的css3样式

npm run build

灯灯灯灯~~

2、转化ES6语法,让我们更爽的使用ES6

这个也很简单

npm install --save-dev babel-loader babel-core babel-preset-env

在package.json同级目录创建一个.babelrc的文件,再去webpack.config.js配置module.rules

{
  "presets": ["env"]//这里可以自己配置哦
}
module: {
    rules: [
        {
            test: /\.js$/,
            exclude: /(node_modules|bower_components)/,//这个是忽略一些文件,不可能去搜索node_module的,太大了
            use:[
                {
                    loader:'babel-loader'
                }
            ]
        }
    ]
},

在index.js写点es6的语法,~~~这个自己写吧

然后npm run build

3、配置webpack-dev-server，watch，以及自动刷新

webpack自己内置了一个属于自己的小型服务器，用于我们在开发的时候调试代码

watch是webpack内容的一个属性，用于监控文件的修改，

webpack自带的自动刷新，不是模块热更新，因为模块热更新比较麻烦，后续遇到会讲

1、webpack-dev-server

npm install --save-dev webpack-dev-server 

devServer: {
    historyApiFallback: true,//如果打开服务的时候是404会自动转去index.html
    contentBase:path.join(__dirname, "dist"),//需要启动服务的文件
    compress: true,//打开压缩,压缩是一种简单，有效的方法来节省带宽，加快您的网站
    //host: "0.0.0.0"//配置你的地址,如果这个没有填写的话,默认是localhost,如果你希望别人可以访问的话可以填写本机地址
    open: true,//自动打开浏览器,建议开启
    port: 6060,//这个是端口,建议改一个,别用默认的
    // proxy: { //转发代理
    //     "/api": {
    //         target: "http://localhost:3000",
    //         pathRewrite: {"^/api" : ""}
    //     }
    // }
    progress:true,//打包过程
}

package.json配置如下

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "webpack --config webpack.config.js",
  "dev":"webpack-dev-server"
},

如果不一样的话,那就要改正哦

npm run dev

成功啦~~~

2、自动刷新，和watch监听文件修改

自动刷新加上这个就好了,

plugins:[
    new webpack.HotModuleReplacementPlugin()
]


再把watch打开,这个是webpack的内置服务,不需要安装,也是很容易的

watch: true,
watchOptions: {
    aggregateTimeout: 300,//延迟多久开始执行监听
    poll: 1000,//每多少毫秒查询一下改动
    ignored: /node_modules/,//忽略监听那些文件,不然太多了
},

npm run dev

我们再去修改一下我们之前写好的样式,写好的html,写好的js,修改一下

自动更新啦,

4、打包第三方库


CommonsChunkPlugin//这个东西就是用来分离公共的模块的插件,webpack本身自带的,我们在使用webpack打包
的时候,其实不需要把jquery打包进去,因为真的太大了,所以需要分离出来,加上别的入口文件也需要引用


ProvidePlugin是用来自动加载库的,不用到处的import的你需要引入的库

npm install --save jquery

这么做是因为生产环境也要用到这个jquery库哦

配置如下

entry: { //入口，就是输入你想要打包的内容
    app: './src/js/index.js', //app就是你文件即将被打包后的名字,后面是的文件目录
    vendor: ['jquery'],//把vendor写一个数组,写入jquery,
},
plugins:[
new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',//对应入口的名字,
    filename: 'asset/js/[name].js',//分离出来的公共模块放置地方
    minChunks: Infinity,//这个是必填写的,公共chunk的数量
}),
new webpack.ProvidePlugin({
    $: 'jquery',
}),
]

在index.js

里面写点jquery代码

npm run dev


jquery已经被分离出来了,

下次用的时候就非常方便了,又很好维护

5、在js文件写上一些注释

plugins:[
    new webpack.BannerPlugin({     banner:"this is you name domingo "
    entryOnly: true,//加上这个就是只在入口文件上面添加 
    include: string | RegExp | Array,//还可以写上包含哪些文件
     exclude: string | RegExp | Array, //去除哪些文件
})]

6、DllPlugin

这个工具的作用就是减少构建的时间,具体要去看官网,我很难说出来，看上去很强大，其实还真的很强大，[捂着脸]强烈推荐

https://doc.webpack-china.org/plugins/dll-plugin#dllreferenceplugin官网地址

不懂的再看看我的代码就好了

const vendors = [
    'jquery',
    './src/js/index.js',
];
module.exports={
entry: { 
    vendor: vendors//这里必须是数组
},

plugins:[
    new webpack.DllPlugin({            path:  path.join(__dirname, 'dist', '[name]-manifest.json'),
            name: '[name]_[hash]',
        })

new webpack.DllReferencePlugin({ //这个是用来调用上面生成出来的json文件的
    context: __dirname,
    manifest: require('./build/vendor-manifest.json'),
}),
//之前的CommonsChunkPlugin要剔除掉,不启动两个分离工具了// new webpack.optimize.CommonsChunkPlugin({
//     name: 'vendor',
//     filename: 'asset/js/[name].js',
//     minChunks: Infinity
// }),
// new webpack.ProvidePlugin({
//     $: 'jquery',
// }),
]
}

npm run build

速度是不是明显快了哦

很棒

好了,webpack基本也说完了,有些东西说的不好的,请见谅,因为本人能力还是小渣水平,

我个人觉得看完了这两个章节再去看官网的,基本也就是没啥问题了,会觉得很容易理解,我已经拿我同事实验过了.

学习就是有需要的就找各种loader,插件,和方法,写在一起,这样就稳了

提前祝新年快乐。



avatar
文章
阅读
粉丝