首页 > > 网页制作 > Javascript >

webpack常见的配置总结 ---只是一些常见的配置

2018-06-24 00:09:27来源：未知阅读 ()

早期的构建工具grunt ,gulp

帮助我们配置一些开发环境，省去一些我们调试和重复的工作

现在我们的构建工具一般是webpack ,目前建议大家用3.0以上的版本

现在市场上比较优秀的构建工具，个人认为有2个（大神有不同意的请不要喷我??）

1-webpack

2-fls3

fls3是百度提供的前端构建工具，文档都是中文的，很方便入手，由于我使用vue习惯了

脚手架依赖webpack，所以个人一直使用webpack

webpack 是一个打包工具（常见的打包）

打包-------将所以的文件打包成一个（通俗话??）

使用webpack

- 安装
- 如果安装全局，可能会导致版本的差异，都安装到项目开发依赖中
，可以使每个人的版本统一

npm install webpack --save-dev

- 在package.json中配置脚本

scripts:{
"build":"webpack"
}

- 执行webpack

npm run build

- 在当前目录下新建一个webpack.config.js
- 名字一定是webpack.config.js，不能错，不能更改
- webpack是基于node语法

 //引进一个node核心模块path
    let path=require('path');
    module.exports={
        //打包的入口
        entry:"./src/main.js",
        //打包出口
        output:{
            filename:"bundle.js",//打包后的文件名
            //path必须是绝对路径
            //path.resolve将相对路径转绝对路径
            path:path.resolve('./dist') //打包后文件的路径
        }
    }

解析es6语法

- babel-core是babel的核心包，使用babel必须安装
- babel-loade是babel的翻译官，但是他没有语法
- 配置转换es5语法必须要让babel的翻译官有语法 babel-preset-es2015

安装上面的es6解析的包

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

配置模块部分转换es5语法

- 在当前目录下新建一个.babelrc文件

{
"presets": ["es2015"]
}

- 第二步在webpack.config.js中增加一个modlue配置
- 在modlue模块规则rules里配置一条js规则

//模块配置
        module:{
            //给模块配置规则
            rules:[
                {
                    //匹配js,使用babel-loade，但不管node_modules目录下面的
                    //如果用到babel-loader，需要配置babelrc
                    test:/|.js$/,use:'babel-loader',
                    exclude:/node_modules/
                }
            ]
        }

解析es7语法

- es2015 stage-3 stage-2 stage-1 stage-0(最高级)

- 先按照依赖包

npm install babel-preset-stage-0 --save-dev

- 在.babelrc文件下增加一个stage-0

{
"presets": ["es2015","stage-0"]
}

解析css 将css看成一个模块

npm install css-loader style-loader --save-dev

- 在webpack.config.js中模块module中规则rules里面增加一个css解析配置

{
//将css文件匹配到先解析css 再将css插入到style中，写法从右往左写
test:/\.css$/,use:['style-loader','css-loader'],
exclude:/node_modules/
}

解析less文件

npm install less less-loader --save-dev

- 在webpack.config.js中模块module中规则rules里面增加一个less配置

     {
           //将css文件匹配到先解析css 再将css插入到style中，写法从右往左写
           test:/\.less$/,
           //包依赖
           use:['style-loader','css-loader','less-loader'],
           exclude:/node_modules/
    }

解析图片一般8k以下才解析base64

- 如果使用js引入图片，默认不会进行打包文件
- 如果是背景图片他会去打包
- 在js引用文件，要import 引入图片
- import img from './1.jpg'

npm install file-loader url-loader --save-dev

- 在webpack.config.js中模块module中规则rules里面增加一个图片配置

    {
        //将css文件匹配到先解析css 再将css插入到style中，写法从右往左写
        test:/\.(png|jpg|gif|woff|svg|eot|woff2|ttf)$/,
        //包依赖 限制8K以上直接输出文件，以下的base64
        // 8*1024 多少字节
        use:'url-loader?limit=8192',
        exclude:/node_modules/
    }

打包html以src下的html作为模板，将打包后的文件引入

npm install html-webpack-plugin --save-dev

npm run build

- 会执行输出实体文件，项目大时候，速度很慢
- 上线时候才npm run build

npm run dev

- 一般我们会在本地跑一个服务，当文件变化，刷新浏览器

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

- 配置webpack里面的dev命令

"scripts": {
"dev":"webpack-dev-server --open"
},

webpack 基础包总结

 npm install webpack babel-core babel-loader babel-preset-es2015
    babel-preset-stage-0 css-loader style-loader less-loader
    sass-loader less stylus-loader file-loader url-loader html-webpack-plugin 
    webpack-dev-server --save-dev