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

早期的构建工具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

 

总结就是安装各类各样的包,基础配置没有什么麻烦，后期也有脚手架，可是基础配置仍是要知道一些

 

若是文章有帮助到您，请点右侧的推荐关注哈，O(∩_∩)O谢谢~ >>>>

谢谢你们 😁