webpack的基本使用与loader的基本配置

1、组织项目结构
2、用npm init -y 命令初始化项目
3、安装你需要的模块 npm install "" -s
webpack-dev-server 自动实时打包
webpack-ev-server实时打需要知道相应的入口文件和出口文件
因此需要一个配置文件 webpack.config.js 其中内容如下
var path = require('path')
module.exports = {
entry: path.join(__dirname, './src/main.js'), //入口文件路径配置
//出口出口路径的配置
output: {
path: path.join(__dirname, './dist'),
filename: 'bundle.js'
}
}
然后直接运行webpack即可

配置热更新
package.json中的scripts对象加入
"dev": "webpack-dev-server --open --port 8089 --contentBase src --hot"
运行命令安装
npm install webpack-cli -D
运行命令
npm run dev
浏览器会打开
让html映射到内存中
安装插件：
npm install html-webpack-plugin -S
配置：在webpack.config.js中配置

配置webpack处理css
安装：
npm install style-loader css-loader
配置：
{test:/.css$/,use:['style-loader','css-loader']}

配置webpack处理less
安装：
npm install less-loader less -D
配置：
{test:/.less $/,use:['style-loader','css-loader', 'less-loader']} 处理 scss 安装 npm install sass-loader node-sass -D 配置： {test:/\.scss$ /,use:['style-loader','css-loader','sass-loader']}
webpack中只能处理部分es6语法，需要配置第三方模块来处理将es6转为低级的语法
配置Babel支持ES6语法
安装
npm install babel-core babel-loader babel-plugin-trasform-runtime -D
npm install babel-preset-env babel-preset-stage-0 -D
在webpack.config.js中配置：
{test:/.js$/,use:'babel-loader',exclude:/node_modules/},
/node_modules/ 为路径注意没有引号
项目的根目录下新建.babelrc的Babel配置文件必须符合JSON语法规范不能写注释字符串必须用双引号
在.babelrc中加入：
{
"presets": [
"env","stage-0"

    ],
    "plugins":[
        "transform-runtime"
    ]
}

webpack的基本使用与loader的基本配置

推荐阅读更多精彩内容