webpack入门配置-及在项目中使用webpack

1. 全局下载webpack

    npm install webpack -g

2. 全局下载webpack-cli

    npm install webpack-cli -g

3. 初始化项目

    npm init 

4. 在项目中使用webpack

    npm install webpack -D

    npm i -D html-webpack-plugin // 在dist 目录下生成bundle

npm -D为--save-dev的缩写

5. 新建webpack.config.js文件

const path = require( 'path');

// webpack用来自动生成和引入js的模块

const HtmlWebpackPlugin = require( 'html-webpack-plugin');

module.exports = {

    // 环境为开发环境

mode: 'development',

    // 入口

entry: {

aa: './src/components/app.js',

},

    // 出口

output: {

path: path.resolve(__dirname, 'dist'),

filename: 'js/bundle.js'

},

    // 模块

module: {

rules: [

{ // 处理.js结尾的文件，使用babel将es6,es7的语法转换成浏览器能识别的语法

test: /\.js $ /,

exclude: path.resolve(__dirname, 'node_modules'),

include: path.resolve(__dirname, "src"),

use: "babel-loader"

},

{ // 处理.css .less结尾的文件,需要下载yarn add css-loader style-loader less less-loader -D

 

            // 注意使用less-loader一定要下载yarn add less -D。

            // postcss-loader是webpack的loader模块的css后处理器，会适配浏览器，将实验室属性前面自动加上前缀

test: /\.(css| less) $ /,

use: [

'style-loader',

{ loader: 'css-loader', options: { importLoaders: 1 } },

{

loader: 'postcss-loader',

options:{

ident: 'postcss',

plugins:[

require( 'autoprefixer')({

browsers:[ 'last 5 versions']

})

]

}

},

'less-loader'

]

},

            // 处理.html结尾的模板文件 yarn add html-loader -D

{

test: /\.html $ /,

use: "html-loader"

},

             // 处理图片资源 yarn add file-loader url-loader -D

{

test: /\.(png| jpe? g| gif| svg)(\?.* )? $ /,

loader: 'file-loader',

query: {

limit: 10000,

name: 'assets/[name].[hash:5].[ext]'

}

}

]

},

plugins: [

new HtmlWebpackPlugin({

template: 'index.html', // 模板html

filename: 'index.html', // 输出的html

inject: false,

minify: {

removeComments: true, // 打包后的html文件去掉注释

collapseWhitespace: true, // 打包后的html文件去掉空格

}

})

]

}

// 在根目录下新建.babelrc文件，里面是你要将js文件编译成es几